search

palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.71k stars 2.17k forks source link

Autofocus on Editable text ? #2492

Open TeaBough opened 6 years ago

TeaBough commented 6 years ago

It would be so great to have an autofocus prop on EditableText. But even without it, I can't find a way to make my EditableText focus when my component mount, has anyone managed to do it ?

giladgray commented 6 years ago

@TeaBough would happily review a submission for such a thing! that'd be a cool feature.

rosscourt commented 6 years ago

This seems to be possible in the current implementation by setting the isEditing prop to true. This causes the input to be present when the component mounts. Due to the input ref code it automatically pulls focus.

I managed to test this in JS Fiddle using a build of V3

https://jsfiddle.net/81qd7vo0/1/

@TeaBough Does that work for you?

TeaBough commented 6 years ago

Nice ! Thx @rosscourt !

silverwind commented 6 years ago

I tried setting isEditing but it did unfocus after the first written letter. What seems to work is this:

ReactDOM.findDOMNode(this).querySelector(".bp3-editable-text-content").dispatchEvent(new Event("focus"));
silverwind commented 6 years ago

@giladgray thanks for reopening. I think it would be a great addition to have a autofocus option available on components. The questions is which ones should it be? I'd imagine any component that accepts user input would be a good target, but there could also be cases where it could be useful on buttons, for example.

franciscohanna92 commented 2 years ago

FWIW autoFocus works just fine when also setting alwaysRenderInput, but this last feature has a bug trying to compute the width before the first focus (#4423)