@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -7,6 +7,7 @@
  * @position Testing; validates CommandPaletteInput.tsx implementation
  */
 
+import {createRef} from 'react';
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import {CommandPaletteInput} from './CommandPaletteInput';
@@ -14,12 +15,47 @@ import {CommandPaletteContext} from './CommandPaletteContext';
 import {Dialog} from '../Dialog';
 import type {CommandPaletteContextValue} from './CommandPaletteContext';
 
+function makeContext(
+  overrides: Partial<CommandPaletteContextValue> = {},
+): CommandPaletteContextValue {
+  return {
+    search: '',
+    setSearch: vi.fn(),
+    value: '',
+    setValue: vi.fn(),
+    listId: 'list-1',
+    highlightedIndex: -1,
+    setHighlightedIndex: vi.fn(),
+    getItemId: (i: number) => `item-${i}`,
+    selectableItems: [{value: 'open', label: 'Open'}],
+    searchResults: [],
+    selectItem: vi.fn(),
+    onKeyDown: vi.fn(),
+    onClose: vi.fn(),
+    isOpen: true,
+    isBusy: false,
+    ...overrides,
+  };
+}
+
 describe('CommandPaletteInput', () => {
   it('renders with default placeholder', () => {
     render(<CommandPaletteInput />);
     expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument();
   });
 
+  it('renders the local input target and delegated search icon', () => {
+    const {container} = render(<CommandPaletteInput />);
+
+    expect(container.firstElementChild).toHaveClass(
+      'astryx-command-palette-input',
+    );
+    expect(container.querySelector('.astryx-icon')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+  });
+
   it('renders with custom placeholder', () => {
     render(<CommandPaletteInput placeholder="Type a command..." />);
     expect(
@@ -27,40 +63,166 @@ describe('CommandPaletteInput', () => {
     ).toBeInTheDocument();
   });
 
-  it('has combobox role', () => {
+  it('uses searchbox semantics when no popup context exists', () => {
     render(<CommandPaletteInput />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    const input = screen.getByRole('searchbox');
+    expect(input).not.toHaveAttribute('aria-expanded');
+    expect(input).not.toHaveAttribute('aria-controls');
+    expect(input).not.toHaveAttribute('aria-autocomplete');
   });
 
-  it('has an accessible name by default', () => {
-    render(<CommandPaletteInput />);
-    expect(screen.getByRole('combobox')).toHaveAttribute(
-      'aria-label',
-      'Search…',
+  it('preserves standalone caller-owned popup semantics', () => {
+    render(
+      <CommandPaletteInput
+        aria-expanded="false"
+        aria-autocomplete="both"
+        aria-controls="caller-list"
+        aria-activedescendant="caller-item"
+      />,
     );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(input).toHaveAttribute('aria-autocomplete', 'both');
+    expect(input).toHaveAttribute('aria-controls', 'caller-list');
+    expect(input).toHaveAttribute('aria-activedescendant', 'caller-item');
   });
 
-  it('uses the label prop as the accessible name', () => {
-    render(<CommandPaletteInput label="Search commands" />);
+  it('infers caller-owned popup defaults from aria-controls alone', () => {
+    render(<CommandPaletteInput aria-controls="caller-list" />);
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    expect(input).toHaveAttribute('aria-controls', 'caller-list');
+  });
+
+  it('preserves a caller-owned combobox role and supplies popup defaults', () => {
+    render(<CommandPaletteInput role="combobox" />);
+
     const input = screen.getByRole('combobox');
-    expect(input).toHaveAttribute('aria-label', 'Search commands');
-    // The label prop does not affect the visible placeholder
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-autocomplete', 'list');
+  });
+
+  it('keeps a toggling caller popup a combobox with its own values', () => {
+    function CallerPopup({open}: {open: boolean}) {
+      return (
+        <CommandPaletteInput
+          aria-expanded={open || undefined}
+          aria-controls={open ? 'caller-list' : undefined}
+        />
+      );
+    }
+    const {rerender} = render(<CallerPopup open={false} />);
+
+    const closed = screen.getByRole('combobox');
+    expect(closed).not.toHaveAttribute('aria-expanded');
+    expect(closed).not.toHaveAttribute('aria-controls');
+
+    rerender(<CallerPopup open />);
+    const open = screen.getByRole('combobox');
+    expect(open).toHaveAttribute('aria-expanded', 'true');
+    expect(open).toHaveAttribute('aria-controls', 'caller-list');
+
+    rerender(<CallerPopup open={false} />);
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-expanded');
+  });
+
+  it('omits an explicitly undefined aria-expanded beside a caller list', () => {
+    render(
+      <CommandPaletteInput
+        aria-expanded={undefined}
+        aria-controls="caller-list"
+      />,
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('aria-expanded');
+    expect(input).toHaveAttribute('aria-controls', 'caller-list');
+  });
+
+  it.each([
+    ['aria-owns', {'aria-owns': 'caller-list'}],
+    ['aria-haspopup="listbox"', {'aria-haspopup': 'listbox' as const}],
+    ['aria-haspopup={true}', {'aria-haspopup': true}],
+  ])(
+    'keeps a field wired to its popup only through %s a combobox',
+    (_label, popupProps) => {
+      render(<CommandPaletteInput {...popupProps} />);
+
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    },
+  );
+
+  it.each([
+    ['false', false],
+    ['"false"', 'false' as const],
+  ])('stays a searchbox when aria-haspopup is %s', (_label, value) => {
+    render(<CommandPaletteInput aria-haspopup={value} />);
+
+    const input = screen.getByRole('searchbox');
+    expect(input).not.toHaveAttribute('aria-expanded');
+    expect(input).not.toHaveAttribute('aria-autocomplete');
+  });
+
+  it('is named "Search commands" by default, not by its placeholder', () => {
+    render(<CommandPaletteInput />);
+    const input = screen.getByRole('searchbox', {name: 'Search commands'});
     expect(input).toHaveAttribute('placeholder', 'Search…');
   });
 
-  it('falls back to a custom placeholder for the accessible name', () => {
+  it('uses the label prop as the accessible name', () => {
+    render(<CommandPaletteInput label="Find files" />);
+    const input = screen.getByRole('searchbox', {name: 'Find files'});
+    expect(input).toHaveAttribute('placeholder', 'Search…');
+  });
+
+  it('never takes its name from a custom placeholder', () => {
     render(<CommandPaletteInput placeholder="Type a command..." />);
-    expect(screen.getByRole('combobox')).toHaveAttribute(
-      'aria-label',
-      'Type a command...',
+    expect(
+      screen.getByRole('searchbox', {name: 'Search commands'}),
+    ).toHaveAttribute('placeholder', 'Type a command...');
+  });
+
+  it('owns role and popup state inside CommandPalette context, passing other ARIA through', () => {
+    render(
+      <CommandPaletteContext value={makeContext()}>
+        <CommandPaletteInput
+          role="searchbox"
+          aria-expanded={false}
+          aria-controls="caller-list"
+          aria-haspopup="dialog"
+          aria-owns="caller-owned"
+        />
+      </CommandPaletteContext>,
+    );
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-controls', 'list-1');
+    expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    expect(input).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(input).toHaveAttribute('aria-owns', 'caller-owned');
+  });
+
+  it('keeps the default name inside CommandPalette context', () => {
+    render(
+      <CommandPaletteContext value={makeContext()}>
+        <CommandPaletteInput placeholder="Jump to…" />
+      </CommandPaletteContext>,
     );
+    expect(
+      screen.getByRole('combobox', {name: 'Search commands'}),
+    ).toBeInTheDocument();
   });
 
   it('lets a consumer-passed aria-label override the default', () => {
     render(
       <CommandPaletteInput label="Search commands" aria-label="Custom name" />,
     );
-    expect(screen.getByRole('combobox')).toHaveAttribute(
+    expect(screen.getByRole('searchbox')).toHaveAttribute(
       'aria-label',
       'Custom name',
     );
@@ -70,15 +232,16 @@ describe('CommandPaletteInput', () => {
     const handleChange = vi.fn();
     render(<CommandPaletteInput onValueChange={handleChange} />);
 
-    const input = screen.getByRole('combobox');
-    fireEvent.change(input, {target: {value: 'test'}});
+    fireEvent.change(screen.getByRole('searchbox'), {
+      target: {value: 'test'},
+    });
 
     expect(handleChange).toHaveBeenCalledWith('test');
   });
 
   it('displays controlled value', () => {
     render(<CommandPaletteInput value="hello" onValueChange={() => {}} />);
-    expect(screen.getByRole('combobox')).toHaveValue('hello');
+    expect(screen.getByRole('searchbox')).toHaveValue('hello');
   });
 
   it('forwards native onChange alongside onValueChange', () => {
@@ -92,46 +255,207 @@ describe('CommandPaletteInput', () => {
       />,
     );
 
-    const input = screen.getByRole('combobox');
-    fireEvent.change(input, {target: {value: 'x'}});
+    fireEvent.change(screen.getByRole('searchbox'), {target: {value: 'x'}});
 
     expect(handleChange).toHaveBeenCalledWith('x');
     expect(handleNativeChange).toHaveBeenCalled();
   });
 
-  it('has aria-expanded and aria-autocomplete', () => {
-    render(<CommandPaletteInput />);
+  it('keeps visible numeric end content in the trailing group', () => {
+    render(<CommandPaletteInput endContent={0} />);
+    const input = screen.getByRole('searchbox');
+    const trailingGroup = screen.getByText('0');
+    expect(trailingGroup.tagName).toBe('SPAN');
+    expect(input.parentElement?.lastElementChild).toBe(trailingGroup);
+  });
+
+  it.each([false, true, '', null, undefined])(
+    'omits trailing chrome for empty end content %#',
+    endContent => {
+      render(<CommandPaletteInput endContent={endContent} />);
+      expect(
+        screen.getByRole('searchbox').parentElement?.children,
+      ).toHaveLength(2);
+    },
+  );
+
+  it('does not schedule focus when hasAutoFocus is false', async () => {
+    const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
+    render(<CommandPaletteInput hasAutoFocus={false} />);
+
+    const input = screen.getByRole('searchbox');
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+    const inputFocusCalls = focusSpy.mock.calls.filter((_, i) => {
+      return focusSpy.mock.contexts[i] === input;
+    });
+    expect(input).not.toHaveAttribute('data-autofocus');
+    expect(inputFocusCalls).toHaveLength(0);
+    focusSpy.mockRestore();
+  });
+
+  it('forwards the ref and native data attributes to the query field', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<CommandPaletteInput ref={ref} data-testid="query-field" />);
+
+    expect(ref.current).toBe(screen.getByTestId('query-field'));
+  });
+});
+
+describe('CommandPaletteInput popup context', () => {
+  it('preserves component-owned combobox semantics against rest props', () => {
+    render(
+      <CommandPaletteContext value={makeContext({isOpen: false})}>
+        <CommandPaletteInput
+          role="button"
+          aria-expanded="true"
+          aria-autocomplete="none"
+          aria-controls="wrong-list"
+          aria-activedescendant="wrong-item"
+        />
+      </CommandPaletteContext>,
+    );
+
     const input = screen.getByRole('combobox');
-    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-expanded', 'false');
     expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    expect(input).toHaveAttribute('aria-controls', 'list-1');
+    expect(input).not.toHaveAttribute('aria-activedescendant');
+  });
+
+  it('renders the busy spinner before trailing content', () => {
+    render(
+      <CommandPaletteContext value={makeContext({isBusy: true})}>
+        <CommandPaletteInput
+          endContent={<span data-testid="trailing-content">⌘K</span>}
+        />
+      </CommandPaletteContext>,
+    );
+
+    const spinner = screen.getByRole('status');
+    const trailingContent = screen.getByTestId('trailing-content');
+    expect(trailingContent.parentElement?.firstElementChild).toContainElement(
+      spinner,
+    );
+  });
+
+  it('reports the contextual open state and controlled list', () => {
+    render(
+      <CommandPaletteContext value={makeContext()}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-controls', 'list-1');
+  });
+
+  it('exposes the highlighted option as the active descendant', () => {
+    render(
+      <CommandPaletteContext
+        value={makeContext({
+          highlightedIndex: 2,
+          selectableItems: [{value: 'a'}, {value: 'b'}, {value: 'c'}],
+        })}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-activedescendant',
+      'item-2',
+    );
+  });
+
+  it('reads and writes search state through context', () => {
+    const setSearch = vi.fn();
+    render(
+      <CommandPaletteContext value={makeContext({search: 'hel', setSearch})}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('hel');
+    fireEvent.change(input, {target: {value: 'help'}});
+    expect(setSearch).toHaveBeenCalledWith('help');
+  });
+
+  it('gives explicit search state precedence over context', () => {
+    const setSearch = vi.fn();
+    const onValueChange = vi.fn();
+    render(
+      <CommandPaletteContext
+        value={makeContext({search: 'context', setSearch})}>
+        <CommandPaletteInput value="explicit" onValueChange={onValueChange} />
+      </CommandPaletteContext>,
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('explicit');
+    fireEvent.change(input, {target: {value: 'next'}});
+    expect(onValueChange).toHaveBeenCalledWith('next');
+    expect(setSearch).not.toHaveBeenCalled();
+  });
+
+  it('does not delegate a consumer-prevented keyboard event', () => {
+    const onKeyDown = vi.fn();
+    render(
+      <CommandPaletteContext value={makeContext({onKeyDown})}>
+        <CommandPaletteInput onKeyDown={event => event.preventDefault()} />
+      </CommandPaletteContext>,
+    );
+
+    fireEvent.keyDown(screen.getByRole('combobox'), {key: 'ArrowDown'});
+    expect(onKeyDown).not.toHaveBeenCalled();
+  });
+
+  it('omits popup ARIA while the result surface has no listbox', () => {
+    render(
+      <CommandPaletteContext value={makeContext({selectableItems: []})}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(input).not.toHaveAttribute('aria-controls');
+    expect(input).not.toHaveAttribute('aria-activedescendant');
+  });
+
+  it('omits an active descendant whose highlighted index has no option', () => {
+    render(
+      <CommandPaletteContext
+        value={makeContext({
+          highlightedIndex: 1,
+          selectableItems: [{value: 'home'}],
+        })}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    expect(screen.getByRole('combobox')).not.toHaveAttribute(
+      'aria-activedescendant',
+    );
+  });
+
+  it('does not route IME composition keys to palette commands', () => {
+    const onKeyDown = vi.fn();
+    render(
+      <CommandPaletteContext value={makeContext({onKeyDown})}>
+        <CommandPaletteInput />
+      </CommandPaletteContext>,
+    );
+
+    fireEvent.keyDown(screen.getByRole('combobox'), {
+      key: 'Enter',
+      isComposing: true,
+    });
+
+    expect(onKeyDown).not.toHaveBeenCalled();
   });
-});
 
-describe('CommandPaletteInput dialog context', () => {
-  function makeContext(
-    overrides: Partial<CommandPaletteContextValue> = {},
-  ): CommandPaletteContextValue {
-    return {
-      search: '',
-      setSearch: vi.fn(),
-      value: '',
-      setValue: vi.fn(),
-      listId: 'list-1',
-      highlightedIndex: -1,
-      setHighlightedIndex: vi.fn(),
-      getItemId: (i: number) => `item-${i}`,
-      selectableItems: [],
-      searchResults: [],
-      selectItem: vi.fn(),
-      onKeyDown: vi.fn(),
-      onClose: vi.fn(),
-      isOpen: true,
-      isBusy: false,
-      ...overrides,
-    };
-  }
-
-  it('does not auto-focus inside an inline dialog', () => {
+  it('does not auto-focus inside an inline dialog', async () => {
     const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
     render(
       <Dialog isOpen isInline onOpenChange={() => {}}>
@@ -142,6 +466,7 @@ describe('CommandPaletteInput dialog context', () => {
     );
 
     const input = screen.getByRole('combobox');
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
     const inputFocusCalls = focusSpy.mock.calls.filter((_, i) => {
       return focusSpy.mock.contexts[i] === input;
     });
@@ -156,7 +481,6 @@ describe('CommandPaletteInput dialog context', () => {
       </CommandPaletteContext>,
     );
 
-    // Auto-focus uses requestAnimationFrame — flush it
     await vi.waitFor(() => {
       expect(screen.getByRole('combobox')).toHaveFocus();
     });

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -9,6 +9,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /apps/storybook/stories/CommandPalette.stories.tsx
+ * - /apps/storybook/stories/CommandPaletteInput.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
  */
 
@@ -16,7 +17,7 @@ import {useCallback, useEffect, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
-import {mergeProps} from '../utils';
+import {isImeKeyEvent, isRenderable, mergeProps} from '../utils';
 import {
   colorVars,
   typeScaleVars,
@@ -112,14 +113,14 @@ export interface CommandPaletteInputProps extends Omit<
 
   /**
    * Placeholder text for the input.
-   * @default 'Search...'
+   * @default 'Search…'
    */
   placeholder?: string;
 
   /**
-   * Accessible label for the combobox input, announced by screen readers.
-   * Falls back to the placeholder text (`'Search…'` by default), since a
-   * placeholder alone is not a reliable accessible name.
+   * Accessible label for the query field, announced by screen readers. The
+   * placeholder is never the field's name.
+   * @default 'Search commands'
    */
   label?: string;
 
@@ -178,12 +179,42 @@ export function CommandPaletteInput({
   const placeholder =
     placeholderFromProps ?? t('@astryx.commandPalette.input.placeholder');
   const ctx = useCommandPaletteContext();
+  // Inside CommandPalette the results surface is a listbox only while it holds
+  // selectable results; empty and pending states expose no popup.
+  const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
   const dialogContext = useDialogContext();
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Use context values as fallback
   const value = controlledValue ?? ctx?.search;
   const handleValueChange = onValueChange ?? ctx?.setSearch;
+  const accessibleLabel =
+    props['aria-label'] ?? label ?? t('@astryx.commandPalette.input.label');
+  const hasEndContent = isRenderable(endContent);
+  // A popup attribute the caller passes is caller-owned even while its value
+  // is undefined (`aria-expanded={open || undefined}`), so the role stays
+  // stable as the caller's popup opens and closes, and a present value is
+  // passed through unchanged.
+  // `aria-haspopup` counts unless it says there is no popup.
+  const callerSets = (key: keyof typeof props) => Object.hasOwn(props, key);
+  const callerDeclaresPopup =
+    callerSets('aria-haspopup') &&
+    props['aria-haspopup'] !== false &&
+    props['aria-haspopup'] !== 'false';
+  const callerOwnsPopup =
+    !ctx &&
+    (props.role === 'combobox' ||
+      callerSets('aria-expanded') ||
+      callerSets('aria-autocomplete') ||
+      callerSets('aria-controls') ||
+      callerSets('aria-owns') ||
+      callerSets('aria-activedescendant') ||
+      callerDeclaresPopup);
+  const standaloneRole = callerSets('role')
+    ? props.role
+    : callerOwnsPopup
+      ? 'combobox'
+      : 'searchbox';
 
   // When rendered inside an inline dialog, disable auto-focus by default
   // to avoid stealing focus from the surrounding page.
@@ -202,7 +233,10 @@ export function CommandPaletteInput({
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       onKeyDown?.(e);
-      if (e.defaultPrevented) {
+      if (e.defaultPrevented || isImeKeyEvent(e.nativeEvent)) {
+        // An in-progress IME composition owns Enter, Escape, and arrows. Let
+        // the input method finish or cancel composition without selecting or
+        // dismissing palette content.
         return;
       }
       // Delegate to useCombobox's keyboard handler from context
@@ -223,20 +257,41 @@ export function CommandPaletteInput({
         <Icon icon="search" size="sm" color="inherit" />
       </span>
       <input
+        {...props}
         ref={useMergedRefs(ref, inputRef)}
+        {...stylex.props(styles.input)}
         type="text"
-        role="combobox"
-        aria-expanded={ctx?.isOpen ?? true}
-        aria-autocomplete="list"
-        aria-controls={ctx?.listId}
+        role={ctx ? 'combobox' : standaloneRole}
+        aria-expanded={
+          ctx
+            ? ctx.isOpen && hasListbox
+            : callerSets('aria-expanded')
+              ? props['aria-expanded']
+              : callerOwnsPopup || undefined
+        }
+        aria-autocomplete={
+          ctx
+            ? 'list'
+            : callerSets('aria-autocomplete')
+              ? props['aria-autocomplete']
+              : callerOwnsPopup
+                ? 'list'
+                : undefined
+        }
+        aria-controls={
+          ctx ? (hasListbox ? ctx.listId : undefined) : props['aria-controls']
+        }
         aria-activedescendant={
-          ctx && ctx.highlightedIndex >= 0
-            ? ctx.getItemId(ctx.highlightedIndex)
-            : undefined
+          ctx
+            ? hasListbox &&
+              ctx.highlightedIndex >= 0 &&
+              ctx.highlightedIndex < ctx.selectableItems.length
+              ? ctx.getItemId(ctx.highlightedIndex)
+              : undefined
+            : props['aria-activedescendant']
         }
-        // A placeholder alone is not a reliable accessible name; give the
-        // combobox an explicit one (consumer aria-label via rest props wins).
-        aria-label={label ?? placeholder}
+        // Placeholder text is never the field's name (AST-056 AR2).
+        aria-label={accessibleLabel}
         placeholder={placeholder}
         value={value}
         data-autofocus={effectiveAutoFocus || undefined}
@@ -245,19 +300,17 @@ export function CommandPaletteInput({
           onChange?.(e);
         }}
         onKeyDown={handleKeyDown}
-        {...stylex.props(styles.input)}
-        {...props}
       />
-      {(ctx?.isBusy || endContent) && (
+      {(ctx?.isBusy || hasEndContent) && (
         <span {...stylex.props(styles.end)}>
           {ctx?.isBusy && (
             <span {...stylex.props(styles.icon, styles.spinner)}>
               <Spinner size="sm" />
             </span>
           )}
-          {endContent}
+          {hasEndContent && endContent}
         </span>
-      )}{' '}
+      )}
     </div>
   );
 }