Skip to content

XDSSelector: extra HTML attributes from XDSBaseProps not forwarded to DOM #1415

Description

@bobenheimer

Bug

XDSSelector accepts XDSBaseProps (which extends React.HTMLAttributes), but the component destructures only xstyle, className, style, and data-testid — all remaining HTML attributes (e.g. data-*, aria-*, title, onFocus, onBlur, etc.) are silently dropped and never reach any DOM element.

Other components like XDSButton correctly use a rest spread (...rest) to forward extra attributes to the root element.

Reproduction

<XDSSelector
  label="Country"
  options={["US", "UK", "CA"]}
  data-logging-label="country-selector"   // ❌ never appears in DOM
  data-testid="country"                    // ✅ explicitly destructured
/>

Inspecting the rendered <button> element shows data-testid present but data-logging-label absent.

Expected

All valid HTML attributes accepted via XDSBaseProps should be forwarded to the trigger <button> element, consistent with how XDSButton and other components handle this.

Suggested Fix

Destructure known props and collect the rest:

const {
  label,
  isLabelHidden,
  description,
  // ... other XDSSelector-specific props
  xstyle,
  className,
  style,
  "data-testid": testId,
  ...rest              // ← add rest spread
} = props;

Then spread ...rest onto the trigger <button>:

  <button
    ref={...}
    id={triggerId}
    type="button"
    role="combobox"
+   {...rest}
    aria-haspopup="listbox"
    ...
  >

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions