Programmatic focus on a text input field is not working in InDesign UXP

InDesign
, ,
1

Hi everyone, I’m posting here to see if this is a known issue and if anyone has any good solutions/workarounds.

I am creating an Indesign UXP plugin using React. One of my components is a custom textfield component, which is essentially just a stylized text input HTML element. There are parent components that incorporate this textfield component and times when the parent must programmatically call focus to this textfield through textInput.focus(). However, calling either textInput.focus() or textInput.click() does not appear to do anything.

Not sure if this is helpful info, but for reference, I am developing for InDesign 20.1 on MacOS Sequoia 15.3.1.

2

At least in Photoshop it doesn’t focus right away after element appears on screen. I use setTimeout(focus(), 250) and it works. Don’t know if it’s the same on InDesign

2 Likes
3

Thanks so much for replying! Unfortunately, it seems focus and textfields work differently in InDesign UXP and Photoshop UXP. Your suggestion works when the panel is docked (it would work without calling setTimeout as well). I forgot to mention in my post that this issue with focus seems to be when the panel is in floating state and is specific to InDesign UXP. Here’s an example of what I mean:

const Textfield = () => {
   const inputRef = useRef(null);

   const handleDivClick = () => {
      inputRef.current?.focus();
      inputRef.current?.click();
   };

   return (
      <>
         <div
            className="container"
            onClick={handleDivClick}
            style={{ width: 100, height: 100, backgroundColor: "red" }}
         >
            Click this div element
         </div>
         <input ref={inputRef} type="text" />;
      </>
   );
};

In this code snippet, the <div> element is a red square. When clicked, the text input element should be focused and the user should be able to start typing. However, when the panel is in floating state, the text input appears to be focused (i.e. has focused styling), but typing does not actually cause the value in input field to change.

4

That panel docked/floating issue is fascinating!

Since it appears that Adobe’s UDT (UXP Developer Tools) always opens my panel as floating when loading/reloading, I rarely ever have it docked.

And, yes, in Adobe InDesign, UI in the panels gets weird with things appearing focused, but typing doesn’t direct there. I’ve seen it frequently. And in macOS I’ve experienced similar stuff with pickers/menus where you can click on one with contents, but it won’t open to allow you so select a different item.

jsw

1 Like
5

Thanks for confirming that you have also noticed weird focus issues in InDesign panels!

Yes, Adobe’s UDT initially loads the plugin in floating state. This is just my personal preference, but I always dock my panel so that I can easily use the element inspection tool in the DevTools without having the entire panel disappear as a result of the application losing focus. Any refreshes to the panel (either through manual Reload or changes detected while Watching) should still preserve the docked state.

6

Thanks for the tip on docking the panel. I wish I would have thought about that option 2 years ago!

jsw