Blueprint: Autofocus on Editable text ?

Created on 14 May 2018  路  5Comments  路  Source: palantir/blueprint

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 ?

core feature request help wanted

Most helpful comment

@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.

All 5 comments

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

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?

Nice ! Thx @rosscourt !

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

```js
ReactDOM.findDOMNode(this).querySelector(".bp3-editable-text-content").dispatchEvent(new Event("focus"));
````

@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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shahzeb1 picture shahzeb1  路  3Comments

havesomeleeway picture havesomeleeway  路  3Comments

ernestofreyreg picture ernestofreyreg  路  3Comments

tomzaku picture tomzaku  路  3Comments

sunabozu picture sunabozu  路  3Comments