[plugin-dev] Any idea on how to autofocus an input element in a Dialog modal?

Hi! I have a question regarding plugin development.
I am currently developing a plugin for Inkdrop and I’m having issues autofocusing the input textbox inside my dialog modal whenever it gets shown via keyboard shortcut.

I have tried adding the autoFocus/autofocus property in react to the actual input and also attempted to use autofocus=true/autofocus={true}/autofocus="true" prop using the via Dialog props.

I also tried implementing useRef() hook which usually works but it didn’t work.
I also tried doing it hacky-style by using javascript in a UseLayoutEffect() hook but it also didn’t work.

Do you have any idea on how to proceed with this or am I missing something?

Environment

  • Platform: Linux
  • Platform version: Arch Linux 5.18.16-zen1-1-zen
  • App Version: Latest (5.5.1)

Hi fuwaa,

Nice to meet you.
Great you are creating a plugin!
Can you give me a repro code? I guess it’d be a race condition issue.
Make sure to set focus after the dialog completely gets shown. Use setTimeout if necessary.

Hi takuya,

Sorry for the late response as it had been around my off time, Thank you for responding fast though!
You’re right as it was a race condition issue!
I tried to avoid using setTimeout but unfortunately, I couldn’t get it to work without using it.

However ever since I started using setTimeout things has been well and progress has been moving.
Looking to release my plugin to Inkdrop soon!

Cheers!

1 Like

Cool! Looking forward to seeing your plugin :smiley:

1 Like