search

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
679 stars 58 forks source link

Support a 'no-auto-select' attribute in `<x-input>` #66

Closed depeele closed 3 years ago

depeele commented 6 years ago

Add support for a no-auto-select attribute on <x-input> to allow disabling auto-select on value change.

This allows the use of <x-input> in components that need tighter control of focus, value-change, and selection.

jarek-foksa commented 6 years ago

When the input is focused, we can't just use this["#input"].value = value to set the new value as this is going to mess up the undo stack. For more details check: https://stackoverflow.com/questions/16195644/in-chrome-undo-does-not-work-properly-for-input-element-after-contents-changed-p

I'm not sure what is your specific use case, but perhaps using something like <x-button>.collapseSelection() would be a better solution?

jarek-foksa commented 6 years ago

BTW, when the input is blurred, we should clear the input's undo stack somehow. I'm not sure how to do this, so far the only solution that worked for me was to recreate the <input> element.

depeele commented 6 years ago

I have a component that is a combination of <x-input> and a custom "menu". When the user begins typing in the input area, the menu will popup. As the user continues typing, the available menu options will be filtered based upon the input value. If there are no remaining matches, the menu will be hidden.

Without this change, when the menu first pops up, and again when the menu is hidden, <x-input> highlights the entire input value. When the user types the next character, the input value is erased.

I'm using lit-html which re-renders the component when the menu opens/closes. This re-render sets the input value to the same value it already has, which shouldn't cause problems, since it's the same value after all.

However, it appears that _onValueAttributeChange() is being fired even when the "new" value is the same as the current value. In this method, since the element will most likely match :focus, the full input will be selected/highlighted causing the issue I'm facing.

jarek-foksa commented 6 years ago

Please use your own custom input component for now, I will have to research this further and unfortunately I won't have much time in the next 2 weeks.

jarek-foksa commented 3 years ago

Since Xel >= 0.9.0 is now dual-licensed under GPLv3 and commercial license I won't be able to accept pull requests anymore. If you can still reproduce the original issue, please report it on https://xel-toolkit.org/issues.