textfields: wait a tick before selecting all to fix iOS (#3501)
fixes https://github.com/tldraw/tldraw/issues/3500 ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know
This commit is contained in:
parent
fa3464ca8c
commit
7104515c9c
1 changed files with 10 additions and 7 deletions
|
@ -39,15 +39,18 @@ export function useEditableText(
|
|||
|
||||
useEffect(() => {
|
||||
function selectAllIfEditing({ shapeId }: { shapeId: TLShapeId }) {
|
||||
if (shapeId === id) {
|
||||
const elm = rInput.current
|
||||
if (elm) {
|
||||
if (document.activeElement !== elm) {
|
||||
elm.focus()
|
||||
// We wait a tick, because on iOS, the keyboard will not show if we focus immediately.
|
||||
requestAnimationFrame(() => {
|
||||
if (shapeId === id) {
|
||||
const elm = rInput.current
|
||||
if (elm) {
|
||||
if (document.activeElement !== elm) {
|
||||
elm.focus()
|
||||
}
|
||||
elm.select()
|
||||
}
|
||||
elm.select()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
editor.on('select-all-text', selectAllIfEditing)
|
||||
return () => {
|
||||
|
|
Loading…
Reference in a new issue