How to autofocus an input element?

[JustARatherRidiculouslyLongUsername]

In my Next.js 13 project, I've got an input component set up as per the basic example like so:

import {
  FC,
  HTMLInputTypeAttribute,
  InputHTMLAttributes,
} from 'react';


interface Props extends InputHTMLAttributes<HTMLInputElement> {
  id: string;
  label?: string;
  type?: HTMLInputTypeAttribute;
}

const Input: FC<Props> = ({ children, className, id, label, type, ...props }) => {
  return (
    <div className={`${className} relative mb-3`} data-te-input-wrapper-init>
      <input
        type={type || 'text'}
        className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
        id={id}
        placeholder={label}
        {...props}
      />
      {label && (
        <label
          htmlFor={id}
          className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[2.15] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[1.15rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
        >
          {label}
        </label>
      )}
    </div>
  );
};

Usage:

<Input id="email" type="email" label="Email Address" />

I would like to focus on one particular Input component on mount. I have tried a couple of things:

1. Add an autoFocus attribute to the <input>:

<input
  autoFocus
  ...
/>

This focuses on the input element, but throws this error on being edited:
https://pastebin.com/tDq8evUu

Also, this does not render the input correctly:

2. Focus the element on mount using a callback ref

<input
  ref={(node) => node?.focus()}
  ...
/>

This seemingly does nothing.

---

How would I go about focusing the input element on mount?
Thanks!

[juujisai]

Have you tried focusing the element in a useEffect hook, after initializing the tw-elements package? How do you initialize the package?

[JustARatherRidiculouslyLongUsername]

I initialize the package in a useEffect hook

'use client';
import { useEffect } from 'react';

export const TWElementsInit = () => {
  useEffect(() => {
    (async () => {
      const { initTE, Input, Select } = await import('tw-elements');
      initTE({ Input, Select });
    })();
  }, []);
  return null;
};

Then, I render that component in each component that has one or more Inputs in it. This is to prevent the tw-elements components from failing to initialize properly during client-side navigation. For example, visiting / will render TWElementsInit once, and navigating from / to /contact will render TWElementsInit again.

import { TWElementsInit } from './TWElementsInit';
import Input from './components/Input';

const HomePage = () => {
  return (
    <main>
      <TWElementsInit />
      ...
      <Input id="name" label="Name" />
      ...
    </main>
  );
};

import { TWElementsInit } from './TWElementsInit';
import Input from '../components/Input';

const ContactPage = () => {
  return (
    ....
    <form>
      <TWElementsInit />
      ...
      <Input id="email" type="email" label="Email Address" />
      <Input id="phone" type="tel" label="Phone Number" />
      ...
    </form>
  );
};

---

I haven't tried focusing the element in a useEffect, however the closest thing I found to the same effect was using a ref to try and focus on the input.

<input
  ref={(node) => node?.focus()}
  ...
/>

This seems to be an underlying problem with the DOM node, since calling .focus() on any tw-elements component doesn't seem to do much. You can test this by running the following in the console of the tailwind-elements docs

$('#exampleFormControlInput1').focus()

How would you suggest I focus on the element in a useEffect?

[juujisai]

I think the problem is that the focus method is beeing called before the component is initialized. You can try adding a ref to an input like that:

<input ref={inputRef}  ... />

and then inside the useEffect hook

...

  const inputRef = useRef()

  useEffect(() => {
    (async () => {
      const { initTE, Input, Select } = await import('tw-elements');
      initTE({ Input, Select });

      inputRef.current.focus()
    })();
  }, []);

...

Let me know if that helped