Fix autocomplete not having filter blank after selecting an item, and fix #540

EWhite613 · 2018-07-18T19:45:32Z

Overview

Does this PR close an existing issue?

No PR should be opened without opening an issue first. Any change needs to be discussed before proceeding.

Summary

Provide a general summary of the issue addressed in the title above

Issue Number(s)

Which issue(s) does this PR address?

Put Closes #XXXX below to auto-close the issue that this PR addresses:

Closes #

Screenshots or recordings

Please provide screenshots or recordings if this PR is modifying the visual UI or UX.

Checklist

Semver

This project uses semver, please check the scope of this PR:

#none#
#patch#
#minor#
#major#

Examples:

NONE
- README.md changes
- test additions
- changes to files that are not used by a consuming application (.travis.yml, .gitignore, etc)
PATCH
- backwards-compatible bug fix
  - nothing about how to use the code has changed
  - nothing about the outcome of the code has changed (though it likely corrected it)
- changes to demo app (/tests/dummy/)
MINOR
- adding functionality in a backwards-compatible manner
  - nothing about how used to use the code has changed but using it in a new way will do new things
  - nothing about the outcome of the code has changed without having to first use it in a new way
  - addition of new CSS selectors
  - addition of new ember-hook selectors
MAJOR
- incompatible API change
  - using the code how used to will cease working
  - using the code how used to will have a different outcome
  - any changes to CSS selector names
  - any removal of CSS selectors
  - any changes to ember-hook selectors
  - possibly changes to test helpers (depends on the changes made)
- any changes to the dependencies entry in the package.json file

CHANGELOG

Fix autocomplete not being able to backspace to blank filter when have already selected

sophypal · 2018-07-18T19:56:24Z

addon/components/inputs/autocomplete.js

    }
  },

+  // == Observers ====================================================
+
+  observeSelectedItemLavelChange: observer('value', 'options.[]', '_isTyping', 'filter', function () {


sophypal · 2018-07-18T19:58:00Z

addon/components/inputs/autocomplete.js

+    const selectedItem = this._findSelectedItemGivenValue(value, options)
+    if (!isEmpty(selectedItem)) {
+      const label = get(selectedItem, 'label')
+      if (!isEmpty(label) && isEmpty(filter) && !isTyping) this.set('filter', label)


So I'm having a tough time understanding what the fix is. Do you mind posting screenshots/vids of the before and after. From what I can understand from these changes, it looks like the filter was empty previously and you're setting it the the selected item label when user is not typing? Is that correct?

Well the original problem when you have a selectedItem and backspace to an empty filter it would.

So if I can keep track of typing I know that I shouldn't set the filter when the user is just backspacing all the way

Interesting. Originally I was thinking that if a user started typing, it meant user intention was to set the value (even with backspace to clear) so it shouldn't need to set the filter back to the original. But autocomplete isn't like Google's auto suggest. A value is only made with a selection and filtering the list shouldn't clear the value.

This was easier to handle in select because there was clear separation between the filtering input and the value's input element. In select typing anything would update the filter to whatever the user typed, regardless if it was empty. If the user didn't like the choices, he could close the dropdown and get back his original value.

Would it be better to keep track of the dropdown states instead of the typing? If the dropdown is open, don't override the filter ever; just keep it at whatever the user typed. Hmm. that would mean you'd also have to fix the automatic closing of the dropdown when they backspace to clear. Man, this component is getting really complex.

Up to you I guess. If I had a hard time understanding this scenario, others will and it'll be hard to maintain. Perhaps throw in some comments explaining this.

The problem, in this case, is I don't have knowledge on whether drop-down is open or not. That's in frost-autocomplete, and since we need to use onInput for querying/etc we can't really have frost-autocomplete control filter for us (because frost-autocomplete assumes if you use onInput you will control the filter, and shouldn't set it.

I think I made it much more readable now by removing the observer logic, I'll add some comments on _isTyping to make it easier to read

Looks like drop-down state is also closed when you have an empty filter. So I'd run into the same issue

Thanks, removing the observer business definitely makes this more readable.

sophypal · 2018-07-18T20:01:27Z

addon/components/inputs/autocomplete.js

+
+      this.setProperties({
+        filter: filterValue,
+        _isTyping: focused


Interested to know why it's necessary to keep typing state. Is there no alternative?

I probably just need to get a better understanding of the bug you're fixing.

Ya I'll add some screenshots/gifs tomorrow to better explain the problem

Well the original problem when you have a selectedItem and backspace to an empty filter it would.

So if I can keep track of typing I know that I shouldn't set the filter when the user is just backspacing all the way

EWhite613 added 5 commits July 18, 2018 14:15

Determine when typing

149aa50

Working?

b45b204

Clean up

fc28536

spelling mistake

a5d945a

add tests

c45b8bb

EWhite613 requested a review from sophypal July 18, 2018 19:45

EWhite613 requested a review from a team as a code owner July 18, 2018 19:45

EWhite613 requested a review from quincyle July 18, 2018 19:45

sophypal reviewed Jul 18, 2018

View reviewed changes

EWhite613 added 2 commits July 18, 2018 17:18

add tests

0eef0b3

fix travis miss

54eda33

EWhite613 requested a review from a team as a code owner July 18, 2018 21:19

EWhite613 and others added 8 commits July 18, 2018 17:21

Merge branch 'master' into master

c5bce53

spelling mistake

7aa8d60

fix test

ae6de1d

Merge branch 'master' of https://github.com/EWhite613/ember-frost-bunsen

3ba81aa

No observer

a0426d6

fix test

e3aed86

remove log

6e441ff

add comments

bc1fa3c

sophypal previously approved these changes Jul 19, 2018

View reviewed changes

EWhite613 dismissed sophypal’s stale review via bc1fa3c July 19, 2018 16:50

sophypal approved these changes Jul 19, 2018

View reviewed changes

EWhite613 merged commit 3460b52 into ciena-frost:master Jul 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix autocomplete not having filter blank after selecting an item, and fix #540

Fix autocomplete not having filter blank after selecting an item, and fix #540

EWhite613 commented Jul 18, 2018 •

edited

Loading

sophypal Jul 18, 2018

sophypal Jul 18, 2018

EWhite613 Jul 19, 2018

sophypal Jul 19, 2018

EWhite613 Jul 19, 2018

EWhite613 Jul 19, 2018

sophypal Jul 19, 2018

sophypal Jul 18, 2018

sophypal Jul 18, 2018

EWhite613 Jul 18, 2018

EWhite613 Jul 19, 2018

Fix autocomplete not having filter blank after selecting an item, and fix #540

Fix autocomplete not having filter blank after selecting an item, and fix #540

Conversation

EWhite613 commented Jul 18, 2018 • edited Loading

Overview

Does this PR close an existing issue?

Summary

Issue Number(s)

Screenshots or recordings

Checklist

Semver

CHANGELOG

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EWhite613 commented Jul 18, 2018 •

edited

Loading