Skip to content

Meteor AutoForm 7.1.0 - Autocomplete #1701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 16 commits into from
Closed

Meteor AutoForm 7.1.0 - Autocomplete #1701

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fab336c
Introducing Autocomplete for Meteor AutoForm
4Z4T4R Dec 20, 2020
a06e00b
Meteor AutoForm 7.1.0 - Native Autocomplete
4Z4T4R Dec 24, 2020
b9da3c7
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Dec 29, 2020
3538e85
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Dec 30, 2020
a3019f4
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Dec 31, 2020
2f020e6
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Jan 5, 2021
b18f721
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Jan 6, 2021
5930cc3
Meteor AutoForm v7.1.0 - Autocomplete
4Z4T4R Jan 8, 2021
b5ba2e4
inputTypes autocomplete update options reactively
jankapunkt Jan 19, 2021
fed965d
inputTypes add missing ReactiveVar import
jankapunkt Jan 19, 2021
a16bf66
inputTypes autocomplete added explicit touch support
jankapunkt Jan 21, 2021
2558865
autocomplete ui and reactivity fixed
jankapunkt Jan 22, 2021
68d5d4c
inputTypes autoComplete added comment on updateValue function
jankapunkt Jan 26, 2021
3077ce1
downgraded version to 7.0.0 until final release to avoid ci conflicts
jankapunkt Jan 26, 2021
6a0df5e
inputTypes autocomplete corrected event bubbling on click and tab
jankapunkt Feb 11, 2021
738c91e
inputTypes autocomplete emit change event only on empty (falsy) or va…
jankapunkt Mar 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions inputTypes/autocomplete/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,17 @@ AutoForm.addInputType('autocomplete', {
},
contextAdjust: function (context) {
context.atts.autocomplete = 'off'
const itemAtts = { ...context.atts }
const { ...itemAtts } = context.atts
// remove non-essential atts from visible input
const visibleAtts = Object.assign({}, { ...context.atts })
const keys = ['data-schema-key', 'id', 'name']
keys.forEach(key => {
const visibleAtts = Object.assign({}, context.atts)

;['data-schema-key', 'id', 'name'].forEach(key => {
delete visibleAtts[key]
})

// add form-control to remaining classes
context.visibleAtts = AutoForm.Utility.addClass({ ...visibleAtts }, 'form-control')
context.atts = AutoForm.Utility.addClass({ ...itemAtts }, 'form-control')
context.visibleAtts = visibleAtts

// build items list
context.items = []

Expand Down Expand Up @@ -121,6 +122,11 @@ Template.afAutocomplete.onRendered(function () {
}
})

const updateValue = value => {
$hidden.val(value)
$hidden.trigger('change')
}

Copy link
Author

@4Z4T4R 4Z4T4R Jan 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clever! Nicely done. Is it safe to assume that the change event triggers validation? on blur too?

Copy link
Author

@4Z4T4R 4Z4T4R Jan 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the blur change below.

Copy link
Member

@jankapunkt jankapunkt Jan 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change is used to fire Updates for any reactive getter like AutoForm.getFieldValue

While blur triggers validation.

// clear on blur?
// TODO: Figure out how blur won't block "click"
// $input.blur((e)=>{ clearDropdown(e) })
Expand All @@ -131,7 +137,7 @@ Template.afAutocomplete.onRendered(function () {
if (/ArrowDown|ArrowUp|ArrowLeft|ArrowRight|Enter|Escape/.test(e.originalEvent.key) === false) {
// we're typing
// ensure hidden and visible values match for validation
$hidden.val($input.val())
updateValue($input.val())
// filter results from visible input value
const result = items.get().filter((i) => {
const reg = new RegExp(e.target.value, 'gi')
Expand Down Expand Up @@ -166,7 +172,7 @@ Template.afAutocomplete.onRendered(function () {
const dataValue = me.$(e.target).attr('data-value')
const dataLabel = me.$(e.target).attr('data-label')
$input.val(dataLabel)
$hidden.val(dataValue)
updateValue(dataValue)
clearDropdown(e, false)
$input.focus()
})
Expand All @@ -176,7 +182,7 @@ Template.afAutocomplete.onRendered(function () {
// bc we all make mistakes
if (result.length === 1) {
$input.val(result[0].label)
$hidden.val(result[0].value)
updateValue(result[0].value)
clearDropdown(e, false)
$input.focus()
}
Expand Down Expand Up @@ -214,13 +220,17 @@ Template.afAutocomplete.onRendered(function () {
const enterValue = $suggestions.children('div').eq(currIndex).attr('data-value')
const enterLabel = $suggestions.children('div').eq(currIndex).attr('data-label')
$input.val(enterLabel)
$hidden.val(enterValue)
updateValue(enterValue)
clearDropdown(e, false)
$input.focus()
}
}
}

$input.blur(() => {
$hidden.trigger('blur') // triggers re-validation
})

// detect keystrokes
$input.keyup((e) => {
callback(e)
Expand All @@ -233,6 +243,7 @@ Template.afAutocomplete.onRendered(function () {

// show on double click
Copy link
Author

@4Z4T4R 4Z4T4R Jan 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change comment to show on touch
Good catch!

$input.on('touchstart', (e) => {
$hidden.trigger('touchstart')
callback(e)
})
})