INSTUI-4429 fix(ui-time-select): clear input field after setting an empty value

[ToMESSKa]

ISSUE:
In the TimeSelect component, after explicitly setting a value, it cannot be cleared from the input field. When the value is deleted form the input filed and the input field loses focus, the last selected option is reapplied.
Also the onChange does not trigger when input field is cleared.

TEST PLAN:

test clearing values if allowClearingSelection is not set (should default to false)

• go to the "Controlled" TimeSelect example
• before selecting a new value, click the input field, delete its current value, and click elsewhere to ensure the input field loses focus
• the input value should go back to the initial value (11:59:00 PM) and onChange should not triggered (can be checked with a console.log)
• reload the same example
• select a new value from the dropdown
• after it' selected, click the input field, delete its current value, and click elsewhere to ensure the input field loses focus
• the input value should go back to the previously selected value and onChange should not triggered (can be checked with a console.log)

test clearing values if allowClearingSelection is true:

• go to the "Controlled" TimeSelect example
• set allowClearingSelection to true
• before selecting a new value, click the input field, delete its current value, and click elsewhere to ensure the input field loses focus
• the input field now should be cleared and have no option selected apart form the placeholder
• onChange should be triggered when input is cleared and loses focus (can be checked with a console.log)
• reload the same example and set allowClearingSelection to true
• select a different value than the current one
• click the input field, delete its current value, and click elsewhere to ensure the input field loses focus
• the input field now should be cleared and have no option selected apart form the placeholder
• onChange should be triggered when input is cleared and loses focus (can be checked with a console.log)

other:

• test of all the other examples in TimeSelect to see if they work as expected
• review the new test

[github-actions]

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-02-03 13:04 UTC

[matyasf]

Nice work!
I think that this new behaviour is much more logical, than the old one. (and the old one was even buggy in the uncontrolled behaviour because you could clear the field when the value was not cleared.)

But I'm afraid that introducing this as a fix could break our user's code, since until now it was impossible for the component to return '' as value, it always returned a valid date.
So can you please put this behind a new prop, say allowClearingSelection (it should default to false) to make sure we dont break code?
Also we could make this new behaviour the default one in the next major version, so please add this to our v11-upgrade-guide.md.

PS I could clear the input with just keyboard, what is the a11y concern here?

[ToMESSKa]

Nice work! I think that this new behaviour is much more logical, than the old one. (and the old one was even buggy in the uncontrolled behaviour because you could clear the field when the value was not cleared.)

But I'm afraid that introducing this as a fix could break our user's code, since until now it was impossible for the component to return '' as value, it always returned a valid date. So can you please put this behind a new prop, say allowClearingSelection (it should default to false) to make sure we dont break code? Also we could make this new behaviour the default one in the next major version, so please add this to our v11-upgrade-guide.md.

PS I could clear the input with just keyboard, what is the a11y concern here?

@matyasf

• introduced the allowClearingSelection and updated the test plan, please check them again
• what is additional fix now is that in the previous version if you clear the input field right after the first render and before selecting anything new, the input field is cleared (but the value is not updated to ''). What I did was (without setting allowClearingSelection to true) is that now clearing the initial input value results in displaying the initial value again (11:59:00 PM) - I think it a reasonable fix but please let me know if it can have any unwanted results and it should be left out
• I updated the v11 documentation too
• as for the a11y issue, if you set allowClearingSelection to true and clear the input value and press Enter, it selects the first option. You can still exit the input field with a Tab, but we @git-nandor and I were not sure if tabbing is a usual user behavior in this case (that why we mentioned an empty first option?)

[joyenjoyer]

nice work

[matyasf]

as for the a11y issue, if you set allowClearingSelection to true and clear the input value and press Enter, it selects the first option. You can still exit the input field with a Tab, but were not sure if tabbing is a usual user behavior in this case

I think that this is fine. We clearly indicate that there is a selection, and Enter confirms it. It might be better if we would not select anything, but thats out of scope for this PR IMO.