Using autofocus on an input outside or inside the kbar components has focus stolen away

[aaronbushnell]

If a page renders an <input> tag that uses autofocus kbar will steal the focus away. Some example code below and a CodeSandbox replicating this issue.

import {
  KBarProvider,
  KBarPortal,
  KBarPositioner,
  KBarAnimator,
  KBarSearch,
  KBarResults,
  useMatches
} from "kbar";

function RenderResults() {
  const { results } = useMatches();

  return (
    <KBarResults
      items={results}
      onRender={({ item, active }) =>
        typeof item === "string" ? (
          <div>{item}</div>
        ) : (
          <div
            style={{
              background: active ? "#eee" : "transparent"
            }}
          >
            {item.name}
          </div>
        )
      }
    />
  );
}

export default function App() {
  const actions = [
    {
      id: "blog",
      name: "Blog",
      shortcut: ["b"],
      keywords: "writing words",
      perform: () => (window.location.pathname = "blog")
    },
    {
      id: "contact",
      name: "Contact",
      shortcut: ["c"],
      keywords: "email",
      perform: () => (window.location.pathname = "contact")
    }
  ];
  return (
    <div>
      {/* An outside input does not autofocus */}
      <input type="text" autoFocus />

      <KBarProvider actions={actions}>
        <KBarPortal>
          <KBarPositioner>
            <KBarAnimator>
              <KBarSearch />
              <RenderResults />
            </KBarAnimator>
          </KBarPositioner>
        </KBarPortal>

        {/* An inside input does not autofocus either */}
        <input type="text" autoFocus />
      </KBarProvider>
    </div>
  );
}

[timc1]

We'll likely want to skip the first effect run here:

kbar/src/InternalEvents.tsx

Line 214 in 805b6ad

React.useEffect(() => {

Thanks @aaronbushnell!

[stale]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[flex-hyuntae]

why this issue is closed?
when kbar is mounted my input call onBlur so ui is break up

do you have plan to fix this? @timc1

[timc1]

@flex-hyuntae check out the latest release here.

[flex-hyuntae]

@flex-hyuntae check out the latest release here.

i cannot find about focus in your link here.
Can you give me the exact link?

[timc1]

@flex-hyuntae That link is for the latest release; please see https://github.com/timc1/kbar/releases/tag/v0.1.0-beta.38.