-
-
Notifications
You must be signed in to change notification settings - Fork 328
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.
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
Meteor AutoForm 7.1.0 - Autocomplete #1701
base: devel
Are you sure you want to change the base?
Conversation
4Z4T4R
commented
Dec 29, 2020
- Added new inputTypes autocomplete directory
- Added HTML for Autocomplete Template
- Added JS for Autocomplete Template
- Circular selection allows arrows to cycle tip to tail and vice versa
- Reactive options allow Tracker vars to provide labels and values to dropdown selections
- Simpl-Schema defined options provide the same path to values and labels as select lists.
- Navigable via arrows so your mouse can rest.
- No third party solutions so we're not feeling bloated.
- Uses bootstrap 4 dropdown class definitions for style so adopters can use theme packages, no problemo.
- Conforms to StandardJS delinting and format so that the gods (and developers) are happy.
- Added new inputTypes autocomplete directory - Added HTML for Autocomplete Template - Added JS for Autocomplete Template (WIP: Need actions!) - Styles will go inside `meteor-autoform-themes` project
- Circular selection - Reactive options - Simpl-Schema defined options - Navigable via arrows - No third party solutions
- Uses bootstrap 4 dropdown class definitions for style - Conforms to StandardJS delinting and format
|
||
// choose an answer on click | ||
$suggestions.children().click((e) => { | ||
const dataValue = $(e.target).attr('data-value') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you please change this to
const dataValue = me.$(e.target).attr('data-value')
so it uses the local-scoped jQuery selector plus it resolves the linter error.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done. Thx.
- added hidden input field to allow labels and values in autocomplete; think 'Full Name' and 'UserId' - now adjusting context for visible and hidden inputs, so AutoForm works as expected on submit - run lint passed - run test passed
- Escape closes the dropdown - Double-click opens the dropdown - Removed a lone helpers definition of no value - Preserved sort order of backing object array - Form /should/ submit properly when 'Enter' triggers and dropdown is hidden - Maybe we're all clear for launch, but I'm not counting my chickens yet
- Fixed HTML structure to display bootstrap validation errors properly in autocomplete inputs.
- Now the values between the hidden and visible fields remain identical so that validation works correctly if the value is deleted.
- Now, after selecting from the autocomplete options, the field keeps focus so that one may tab to the next field.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's general feedback here. Just some curiosity around the trigger for the input/hidden input.
@@ -230,4 +230,9 @@ Template.afAutocomplete.onRendered(function () { | |||
$input.dblclick((e) => { | |||
callback(e) | |||
}) | |||
|
|||
// show on double click |
There was a problem hiding this comment.
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!
const updateValue = value => { | ||
$hidden.val(value) | ||
$hidden.trigger('change') | ||
} | ||
|
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
…lid (in selectOptons) value