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

On form reset, input field clears but the value persists. #221

Closed
hsdhott opened this Issue Aug 3, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@hsdhott

hsdhott commented Aug 3, 2016

As you can see in the gif below that when reset button is clicked the input field clears but the previously selected option persists. Only way to clear the previously selected option is to press esc when input is in focus.

Here is the jsfiddle to reproduce it: https://jsfiddle.net/hsdhott/k2zo2n5t/

query typeahead - jsfiddle20160803133408

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 5, 2016

hey, thanks for pointing it out. Indeed the Typeahead's input input event does not get triggered from the reset button. Might have to trigger a manual event in that case.

@running-coder running-coder added the Bug label Aug 5, 2016

@running-coder running-coder added this to the 2.7.0 milestone Aug 5, 2016

running-coder pushed a commit that referenced this issue Aug 5, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 5, 2016

This commit should fix the issue.

running-coder pushed a commit that referenced this issue Aug 5, 2016

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default
@hsdhott

This comment has been minimized.

hsdhott commented Aug 23, 2016

Hi @running-coder
Sorry, for late reply, I've been out and didn't get to test this out until now. It is working great, but I've noticed that when we click reset, the dropdown opens up with (when searchOnFocus: true).

Additionally, this is for support I believe. When we use Javscript to empty the typeahead input filed. Is there a way to reset the dropdown list as well?
Behavior (searchOnFocus: true):

  • if the dropdown list includes ["Afghanistan", "Albania", "Algeria", "Andorra"]
  • Type "af" in the input filed so that Afghanistan is the first choice. Then use js to remove text from input field
  • Going back to the typeahead, when click inside the filed dropdown only shows Afghanistan

Let me know if you have any questions, I can create a jsfiddle.

Thank you for your help again.

@running-coder

This comment has been minimized.

Owner

running-coder commented Aug 29, 2016

after changing Typeahead's input value via script you simply need to trigger a "search event" using the input event.

inside the documentation in the Extras section you should be able to see $('#mySearchInput').trigger('input.typeahead');

so in your usecase it should be $('#mySearchInput').val('').trigger('input.typeahead');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment