fluentui
fluentui copied to clipboard
microsoft
Cursor jumps to the end on selecting and editing text on freeform combobox
Environment Information
- Package version(s): 8.10.0, Also tried it on 8.15.0 and still repro.
- Browser and OS versions: (fill this out if relevant), not relevant, repro on Edge, Chrome and other browsers.
Please provide a reproduction of the bug in a codepen:
https://codepen.io/syedinaqvi/pen/abJaOyO
Actual behavior:
Go to codepen link here https://codepen.io/syedinaqvi/pen/abJaOyO. Select one option from the dropdown, e.g., select 11:00 PM (ensure that Allow freeform is enabled). Select the 00 part of time and enter 2 numbers to replace the selected value. After first number is pressed cursor jumps to the end.
Expected behavior:
Cursor should not jump to the end.
Priorities and help requested:
Are you willing to submit a PR to fix? No
Requested priority: (Blocking, High, Normal, Low), High, as it repro only on v8.
Products/sites affected: Outlook Web
@microsoft/cxe-red, @ecraig12345 - may I ask you for your help here?
@czearing, I looked into this same issue a week ago, but was unable to repro it until this weekend when I realized that the problem does not repro if you use the backspace key or either of the arrow keys before typing into the combobox. Either of those actions disables autofill in the combobox and allows the freeform entry to continue as expected.
In the repro case, the user begins typing into the combobox at some point in the middle of the string (eg. editing the value) while autofill is still enabled.
I'm not familiar with this codebase, but it seems like autofill ought to be disabled whenever the cursor location is not at the end of the input. FWIW, I have a proposed fix out at https://github.com/KAnder425/fluentui/commit/96068fc58b70f109e17059cbc800fb1d76c41167
Let me know if that helps!
@KAnder425 Thanks for the investigation notes; that should help!
My first guess was that this was related to ComboBox being refactored from a class component to a function component as part of version 8 (also Autofill was modified to get rid of componentWillReceiveProps), but looking at the history, there was a more recent change #17475 which modified the cursor behavior. It looks like @TristanWatanabe has an open PR #18186 addressing a different cursor behavior issue resulting from that change, but it's possible that will fix this issue too.
Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.
@czearing We are still seeing this happening. Is there any chance it can be revisited? Can the PR you raised still be completed?
Outlook users are still complaining about this problem, as of September, 2022
This does not repro for me anymore. Can you confirm that it is resolved?
This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!
It still repro for the Outlook users. I was also able to repro it here: https://codepen.io/syedinaqvi/pen/abJaOyO Using these repro steps:
- Select one option from the dropdown, e.g., select 11:00 PM (ensure that Allow freeform is enabled).
- Select the 00 part of time and enter 2 numbers to replace the selected value. Result: After first number is pressed cursor jumps to the end.
Ok, i see the difference. You need to select the two digits with your mouse and then try to replace them. If you select via keyboard it works as expected.
Alright, we were able to triage the issue and locate the source of the bug. Here's a quick TL:dr
- In React, if you have an input with a fixed value, but no onChange event, on keystroke, your focus will be sent to the end of the input https://codepen.io/micahgodbolt/pen/MWqweNg?editors=0010 Sarah also created a great example of this happening in any controlled JS https://jsfiddle.net/6wxsbykm/
- Combobox uses a controlled Autofill component, but the Autofill also has its own internal state
- So, on keypress the Autofill re-renders, but since the value doesn't change, it moves the cursor to the end
- On the next render, Combobox passes down the new value, and the Autofill updates the displayed value (but not until after the cursor has moved)
Possible solution
I think the issue is calling onInputValueChange after calling the local setState
this.setState({ inputValue: newValue }, () => onInputValueChange?.(newValue, composing));
Moving the onInputValueChange up to before setState makes the displayed value update properly and the cursor is not moved.
I'm not sure if this has any other negative effects though, and will need to test a bit more.
Re-activating this bug, as the fix for this bug is being reverted in PR https://github.com/microsoft/fluentui/pull/27323 because it caused a regression:
- https://github.com/microsoft/fluentui/issues/27256
