tab and enter handling

[mcshaz]

changes were made to meet my needs, and as much as anything this is to let you know some things I found - whether you take or leave any of this pull request is obviously up to you.

Changes to VueSingleSelect.vue

1. Prevent default on enter - many developers will have their inputs inside a form, and will not want the form to be submitted on enter. therfore needs to be keydown with stop
2. the key.enter event over the li could not be fired in any browsers I tested.
3. Tab should select an element to my mind
4. This is purely behaviour I like but tab now selects and also tabs to the next element. this is not the default behavior of all native selects, so take it or leave it (line 347), but it speeds up filling in longer forms.
5. nexttick promise can loose the 'this' context (even in arrow functions). using self
6. erratic behavior on re-entering the control fixed - the 'inputId' input may not be attached at the point of checking if the click was outside.
7. removed click for the search input - focus should handle that
8. removed blur from li - I don't think this means anything on a non input

note 2 tests are failing but I don't think it is my changes.

Changes to App.vue

1. 3 references to vue-taggable-select, which is (appropriately) no longer imported (resulting in a console error)
2. a native select was included to allow you/others to compare the native behaviour to esc, enter, tab etc

[mcshaz]

appologies - I just saw there was all this unnecessary linting on 1 change. let me know if you would prefer, and I'll undo the linting

[robrogers3]

Hey thanks for the pull request. At a high level, what problems where you having that your changes fix?

The prevent default for form submission does make sense.

[corbanmailloux]

(Note: I'm not the original reporter, but this is a feature I was looking for as well.)

Any updates on this? It seems that the changes here are what I was really looking for.

To answer @robrogers3's question, the feature I was looking for was making Tab and Enter while an option was highlighted cause the box to be filled with the select and not automatically trying to submit the form that the element is part of.

Is it possible to expose these options as settings? I'm not sure what the rest of the changes in this PR are for (linting, it seems), but this fix would be useful to me.

If needed, I could open a different PR with only the changes I linked to above.

[robrogers3]

Hello,

I lost my dev laptop a while ago and have just now gotten around to getting my old projects running.

Per the changes, what tests are breaking? (Or what tests are just failing?)

Depending on what’s what if the tests aren’t problematic then I’ll just merge and commit.

Robert Rogers 415.615.2859 [email protected]

On Apr 23, 2019, at 9:59 PM, Brent McSharry [email protected] wrote:

changes were made to meet my needs, and as much as anything this is to let you know some things I found - whether you take or leave any of this pull request is obviously up to you.

Changes to VueSingleSelect.vue

Stop propagation on enter - many developers will have their inputs inside a form, and will not want the form to be submitted on enter. therfore needs to be keydown with stop the key.enter event over the li could not be fired in any browsers I tested. Tab should select an element to my mind 4 this is purely behaviour I like but tab now selects and also tabs to the next element. this is not the default behavior of all native selects, so take it or leave it (line 347). note 2 tests are failing but I don't think it is my changes.

Changes to App.vue

3 references to vue-taggable-select, which is (appropriately) no longer imported (resulting in a console error) a native select was included to allow you/others to compare the native behaviour to esc, enter, tab etc You can view, comment on, or merge this pull request online at:

https://github.com/robrogers3/vue-single-select/pull/17 https://github.com/robrogers3/vue-single-select/pull/17 Commit Summary

tab and enter handling File Changes

M src/App.vue https://github.com/robrogers3/vue-single-select/pull/17/files#diff-0 (76) M src/VueSingleSelect.vue https://github.com/robrogers3/vue-single-select/pull/17/files#diff-1 (19) Patch Links:

https://github.com/robrogers3/vue-single-select/pull/17.patch https://github.com/robrogers3/vue-single-select/pull/17.patch https://github.com/robrogers3/vue-single-select/pull/17.diff https://github.com/robrogers3/vue-single-select/pull/17.diff — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/robrogers3/vue-single-select/pull/17, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVFPWU2ZLZYIGW23SA6BZTPR7SK5ANCNFSM4HIALS7Q.

[robrogers3]

So a few comments. In short, I pulled over some of @mcshaz changes. The main one I didn't was using tab to select options. Tab doesn't behave this way on regular selects, more it should just tab to the next field. If it selects an element then it always will if any matching elements are found.

The fixes and changes added were:

• prevent default on keyup enter as to not submit a form
• perhaps wonky behavior on re-enter search field
• remove unnecessary event handlers: like click on search and blur on li's.

Also added is:

• disabling the field via props

[robrogers3]

@mcshaz i've incorporated some your code into the base. not all of it. it was breaking tests and more the tab select is not appropriate as an action to select an option. it should take you to the next input. let me know if you have any suggestions.