fix inputs not blurring when pressing enter #4692
Conversation
Signed-off-by: Andreas Schmidt <ndrscodes@gmail.com>
ndrscodes
requested review from
jakolehm and
Nokel81
and removed request for
a team
| @@ -283,6 +283,9 @@ export class Input extends React.Component<InputProps, State> { | |||
| } else { | |||
| this.setDirty(); | |||
| } | |||
|
|
|||
| //pressing enter indicates that the edit is complete, we can unfocus now | |||
| this.blur(); | |||
There was a problem hiding this comment.
Shouldn't this happen a few lines up, after the this.setState() call?
There was a problem hiding this comment.
It depends. doing it like this, the user can unfocus the input even if it's not valid. If we blurred the input right after calling setState, the user would lose the ability to do so (even if trying to submit invalid data doesn't make much sense).. Idk which solution is better.
There was a problem hiding this comment.
How does this work with components like EditableList? Have you tried that?
makes sense
There was a problem hiding this comment.
i've tested EditableLists using the accessible namespaces. The namespace is added and after that, the input blurs. Should we keep the input focussed in those cases?
There was a problem hiding this comment.
What's the cleanest way of doing this in this scenario? Checking the type of Input in the onKeyDown method seems pretty unclean, but that would mean each class would have to decide if the input needs to be blurred itself, or needs to focus the input again. All of these solutions are not optimal imho
There was a problem hiding this comment.
Since I think EditableList is the only place where this matters I would make a prop called something like blurOnEnter with default value true and then EditableList can set it to false.
Signed-off-by: ndrscodes <ndrscodes@gmail.com>
ndrscodes
force-pushed
the
fix/unfocus-input
branch
from
720f486
to
0d134ed
Compare
Signed-off-by: ndrscodes <ndrscodes@gmail.com>
ndrscodes
force-pushed
the
fix/unfocus-input
branch
from
66901b4
to
1f68b4a
Compare
|
sorry for causing trouble again. I removed an unnecessary call to stopPropagation(). @Nokel81 |
|
@ndrscodes Can you please investigate the namespace selector test that is failing? |
I've checked it, but i do not know what is causing this issue. It seems like the event is not being propagated to the Wizard/WizardStep. As soon as i implement this.blur() (even this.input.blur()), the WizardStep stops executing the next() function. Do you know what could be causing this? @Nokel81 |
What we could do is giving an onKeyDown handler to the |
That is a good idea |
ndrscodes
force-pushed
the
fix/unfocus-input
branch
from
3e08804
to
59af011
Compare
Signed-off-by: ndrscodes <ndrscodes@gmail.com>
ndrscodes
force-pushed
the
fix/unfocus-input
branch
from
59af011
to
3559fa9
Compare
Fixes #4669.
This fix/feature causes inputs to blur (causing the onChange event to be triggered) once the Enter key is pressed. As of now, the user has to manually click outside of the active input in order to save the value.