React : can't type in autofocused input / keyboard selected input

Question

I have a little form in a modal in my app. It's working just fine. I've just added an autoFocus on one of its input and it's not working as intended : the focus is on the right input, with the caret blinking and all. But I just can't type text in it. If I press my tabulation key, focus switch to next input but I still can't type anything.

If I select any of those inputs with my mouse (before or after autofocus/focus with tabulation), I can type text, no problem at all.
If I put autofocus on an input outside of the modal, it works : I can type text.
If I remove all autofocus (like it was this morning) and navigate to my modal's inputs with tabulations, it's the same problem : looks focused but can't type any text.
If I focus a modal's input with my mouse and navigate to the next one with tabulation, I can type text.

I've tried to put the same condition on this autofocus that triggers my modal's opening, but it doesn't change anything.

So, to sum it up : when dealing with a modal's form, I need an active mouse focus to init text typing in this form, even though visual focus can be achieved anyway.

I'm not sure it will help but here's my modal's form :

<form
              name="modifyVersion"
              autoComplete="off"
              onClick={() => {
                changingActiveVersion();
              }}
              onSubmit={(e) => {
                e.preventDefault();
              }}
            >
              <input
                type="text"
                id="versionNumber"
                placeholder="X.Y.Z"
                required
                value={!existingVersion ? streamVersion : ""}
                onChange={(e) => setStreamVersion(e.target.value)}
                onKeyUp={(e) => {
                  if (e.key === "Enter" || e.keyCode === 13) {
                    handleEditCreate("version");
                    setModifiedVersion(true);
                  }
                }}
                // autoFocus={true}
              />
              <input
                type="text"
                id="versionDescription"
                placeholder="description"
                required
                value={!existingVersion ? versionDescription : ""}
                onChange={(e) => setVersionDescription(e.target.value)}
              />
              <button
                type="button"
                onClick={() => {
                  handleEditCreate && handleEditCreate("version");
                  setModifiedVersion(true);
                }}
              >
                <i className="bi bi-plus-lg" style={{ fontSize: "1rem" }} />
              </button>
</form>

M0ngi · Accepted Answer · 2023-07-17 18:39:10Z

1

I would suggest adding the onShow event handler to the modal

<Modal onShow={() => inputRef.current.focus()}

And adding a ref to the input

      <input
        type="text"
        ref={inputRef}
        id="versionNumber"
        placeholder="X.Y.Z"
        required
        defaultValue={!existingVersion ? streamVersion : ""}
        onChange={(e) => setStreamVersion(e.target.value)}
        onKeyUp={(e) => {
          if (e.key === "Enter" || e.keyCode === 13) {
            handleEditCreate("version");
            setModifiedVersion(true);
          }
        }}
        // autoFocus={true}
      />

EDIT:

Since the above didn't work, I had to set up a test project to try this, change the value property to defaultValue It should work now.

edited Jul 17, 2023 at 18:39

answered Nov 29, 2021 at 16:03

M0ngi

3122 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FlowRan Over a year ago

Thank you for your suggestion. I tried this way but focus isn't working at all. I tried to use a ref on the input and to trigger it inside a useEffect : my input has focus but I can't type text, like with my initial attempt.

M0ngi Over a year ago

@FlowRan I've edited my answer, using "defaultValue" instead of "value" for the input field attribute should work.

FlowRan Over a year ago

It's now working with defaultValue, thank you ! But I had to use useEffect to trigger it since onShow on the modal wasn't working.

Collectives™ on Stack Overflow

React : can't type in autofocused input / keyboard selected input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related