Autocomplete: add clearable prop

[arthurdenner]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide (中文 | English | Español).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

This PR allows el-autocomplete to be clearable, just like el-input.

[element-bot]

Deploy preview for element ready!

Built with commit 88ff1b7

https://deploy-preview-12171--element.netlify.com

[ziyoung]

@arthurdenner it seems that you only add clearable attribute and this attribute does'nt work.

[arthurdenner]

@ziyoung maybe I'm missing something, but the props object is passed to el-input here, so I just need to declare it as a prop. Testing locally, if I put the default value as true, it works as expected.

[ziyoung]

@arthurdenner after I click the clear icon, the autocomplete suggestions are expected to display all.

[arthurdenner]

Sorry @ziyoung, I didn't notice this. Thanks for pointing it out.

I did a little digging, tried a few things, but only got it fixed by adding @clear="handleClear" on el-input.

handleClear() {
  this.$nextTick(_ => {
    this.handleFocus();
  });
},

However, I'm not sure if that's the best solution so I didn't commit it. Would you accept this as a solution or do you have an idea of how to fix it properly?

[wacky6]

My recommendation is "try to avoid $nextTick / setImmediate / setTimeout", they could cause timing issues, and they don't offer a clear picture of function call stack and state transition.

[arthurdenner]

Thanks, @wacky6. I'm aware of that, which is why I'm not satisfied with this fix.

But what I noticed is: though focus is only called after emitting the clear event, the suggestions are re-calculated before el-autocomplete realizes that its value is an empty string, so it re-calculates with the wrong this.value.

Do you have a suggestion to a proper fix?

[wacky6]

Why not just call auto-complete's handleFocus or debouncedGetData?

You might also need to consider emission of 'focus' event. Personally, I don't think clearing auto-complete should emit another focus event.

[arthurdenner]

Good point, it shouldn't emit another focus event. Calling this.debouncedGetData(this.value) directly on handleClear doesn't work (for the same reason described above). It only works if called in the nextTick callback.

[wacky6]

I've looked at the source code, the problem is more serious than I thought.

• el-input focuses itself after being cleared. This emits a 'focus' event, which is handled in auto-complete, at this instant, auto-complete's value has not been updated. handleFocus then picks up the old value, thus the dropdown list is incorrect.
• el-input's behavior of focusing itself is inconsistent with other components. Select, Cascader, DatePicker will not focus themselves after being cleared.

For reference, input's clearable was added in #8509 (community contribution)

---

Consider:

• A quick fix: I would consider adding a flag to "ignore" focus event once after being cleared (the current activated prop may be useful). Or as you suggested, use $nextTick.
• A more complete fix: make el-input not to focus itself after being cleared, and autocomplete should close itself after being cleared. (to stay consistent with select/cascader/date-picker). This could be considered to be incompatible with previous releases.

@jikkai @ziyoung Please review the proposed fixes.

[arthurdenner]

@wacky6, just so you know, I've implemented the more complete fix but I'm waiting for the fixes you proposed to be reviewed. If you think this could be a breaking change, I can change the pull request to the next branch instead of dev.

[JasonZough]

hope this will soon be released !

[arthurdenner]

@wacky6, I committed the more complete fix and changed the PR to the next branch.

[wacky6]

LGTM for next. Should add some tests afterwards.

jsfiddle playground: https://jsfiddle.net/zd6gfbn1/

[arthurdenner]

Sorry for bothering, but what is missing for this PR to be accepted? 😕

[wacky6]

@jikkai This PR can be merged for 3.0 milestone

[arthurdenner]

Hi guys, any updates about this PR? I'm about to launch a product and I would like to have this feature. :/

[wacky6]

@ziyoung Should this PR go to 2.0 or 3.0?

[ziyoung]

@arthurdenner clear event is added in pr #13326. I didn't notice there was a bug. It's my fault.☹️
We can merge this pr to 2.x.

[arthurdenner]

@ziyoung I've rebased the branch and the PR points to the dev branch now.
Let me know if I need to do anything before this get merged please.

[ziyoung]

@arthurdenner done.😄

[arthurdenner]

Thank you very much, @ziyoung!