EditableInput with focus doesn't change value
See original GitHub issueHey @casesandberg
I found a potential bug on EditableInput
. When EditableInput is focused and you drag a Saturation or a Hue, the value doesn’t change.
I create a small demo. You can edit it here: https://codesandbox.io/s/n53766998j
Just trying to debug the problem seems that if you change it by a normal input
this “bug” disappear.
The problem may be that the EditableInput doesn’t receive new props and doesn’t trigger
componentWillReceiveProps
: https://github.com/casesandberg/react-color/blob/master/src/components/common/EditableInput.js#L14.
and btw, thanks for react-color, it’s anwesome lib!
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
HTML input fields does not get focus when clicked
when i click it the field does not get the focus. i can access the field via pressing the "tab-key". It sounds like...
Read more >HTMLElement.focus() - Web APIs | MDN
The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element that will ...
Read more >Focusing: focus/blur - The Modern JavaScript Tutorial
This can be changed using HTML-attribute tabindex . Any element becomes focusable if it has tabindex . The value of the attribute is...
Read more >lightning-input - documentation - Salesforce Developers
The lightning-input component uses the Javascript parseFloat() function to convert input value strings to numbers. Very large numbers with more than ...
Read more >SetFocus function in Power Apps - Microsoft Learn
SetFocus can only be used with: ... You cannot set the focus to controls that are within a Gallery control, Edit form control,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I agree the inputs should only hold focus when you are actually focused on them. I believe this an accessibility problem of the sliders not taking focus. I am looking into this for v3.0.0
The EdibleInput components only updates when you are not focused to prevent hex completion. For example, when you start to type in 333, the value that comes back is actually 333333, but we don’t want to replace that in the field if you were meaning to type 333aaa.
I just looked at the demo you provided and see the issue you are talking about. I think the appropriate behaviour would be for the input to blur when you click or drag on anything outside of it. This would fix the issue you are talking about and update with the appropriate value.