Unable to rename a tree item when using renderRenameInput

[arusak]

When I implement a custom renderRenameInput, onRenameItem is not called.

   <UncontrolledTreeEnvironment
      dataProvider={dataProvider}
      getItemTitle={(item) => item.data.name}
      viewState={{}}
      renderRenameInput={(props) => (
        <form {...props.formProps} className={s.form}>
          <span>
            <input
              {...props.inputProps}
              ref={props.inputRef}
              className="rct-tree-item-renaming-input"
            />
          </span>
          <span>
            <button {...props.submitButtonProps} type="submit">
              ok
            </button>
          </span>
        </form>
      )}
      onRenameItem={(item, name) => console.log(name)}
    >
      <Tree treeId="tree" rootItem="root" />
    </UncontrolledTreeEnvironment>

The code for renderRenameInput was taken (with small changes) from your BlueprintJS example.

So with this code I select a tree item, press F2 and get my input. I change its value to some string and click 'ok' button. I expect the input to be gone and the string I entered to appear in the console. What I get: the input is gone (as expected), but nothing is displayed in the console.

When renderRenameInput is not set, I get a warning: "Form submission canceled because the form is not connected", though onRenameItem is called and I see new value in the console. Maybe it has something to do with this bug.

I use Chrome 111 on Windows 10.

[lukasbach]

Hi! You need to add ref={props.submitButtonRef} to the props of the submit button, then it should work. RCT checks if the input is blurred, i.e. the user clicks away from the input, and when that is the case, it canceles the renaming and hides the rename input. It uses a ref on the button to find out that the user is not actually cancelling the renaming, but clicking on the submit button. So without the ref, it thinks the user is just clicking away from the input, and unmounts the button and input before the submit logic can complete.

[arusak]

Hi, Lucas. Thank you, that worked. I still get a warning "Form submission canceled because the form is not connected" in console though it doesn't cause any problem for the app.

[lukasbach]

I suppose that has to do with that RCT runs the rename logic and unmounts the form before the browser can handle the form submission, but I think that shouldn't be an issue.