Skip to content
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

Open
wants to merge 16 commits into
base: devel
Choose a base branch
from

Conversation

4Z4T4R
Copy link

@4Z4T4R 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')
Copy link
Member

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.

Copy link
Author

Choose a reason for hiding this comment

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

Done. Thx.

4Z4T4R and others added 9 commits December 30, 2020 11:49
- 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.
Copy link
Author

@4Z4T4R 4Z4T4R left a 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
Copy link
Author

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!

Comment on lines 125 to 129
const updateValue = value => {
$hidden.val(value)
$hidden.trigger('change')
}

Copy link
Author

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

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

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.

inputTypes/autocomplete/autocomplete.js Outdated Show resolved Hide resolved
inputTypes/autocomplete/autocomplete.js Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Monitoring
Development

Successfully merging this pull request may close these issues.

Create a native 'autocomplete' type for afQuickfield in AutoForm that is Bootstrap themed.
2 participants