fix(Select): allow attachment of headlessUI props to label (#1991)

chanzuckerberg · Jun 13, 2024 · c3ce70f · c3ce70f
1 parent 11c0883
commit c3ce70f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 86 deletions.
diff --git a/src/components/FieldLabel/FieldLabel.tsx b/src/components/FieldLabel/FieldLabel.tsx
@@ -16,7 +16,7 @@ export type FieldLabelProps = {
   /**
    * ID of input that label is associated with.
    */
-  htmlFor: string;
+  htmlFor?: string;
   // Design API
   /**
    * Indicates disabled state of the input.
@@ -36,7 +36,7 @@ export type FieldLabelProps = {
  * Label associated with an input element or field.
  */
 export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
-  ({ children, className, htmlFor, size = 'lg', disabled }, ref) => {
+  ({ children, className, htmlFor, size = 'lg', disabled, ...other }, ref) => {
     const componentClassName = clsx(
       styles['label'],
       size === 'md' && styles['label--md'],
@@ -50,6 +50,7 @@ export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
         className={componentClassName}
         htmlFor={htmlFor}
         ref={ref}
+        {...other}
       >
         {children}
       </label>

diff --git a/src/components/Select/Select-v2.test.tsx b/src/components/Select/Select-v2.test.tsx
@@ -97,7 +97,7 @@ describe('<Select />', () => {
         onChange={() => undefined}
         value={exampleOptions[0]}
       >
-        <Select.Label htmlFor="non-throwing-select">Options:</Select.Label>
+        <Select.Label>Options:</Select.Label>
         <Select.Button>Select</Select.Button>
 
         <Select.Options>

diff --git a/src/components/Select/Select-v2.tsx b/src/components/Select/Select-v2.tsx
@@ -10,7 +10,6 @@ import React, {
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
-import { useId } from '../../util/useId';
 import type { ExtractProps } from '../../util/utility-types';
 import type { Status } from '../../util/variant-types';
 import FieldLabel from '../FieldLabel';
@@ -89,7 +88,6 @@ type SelectProps = ExtractProps<typeof Listbox> &
 
 type SelectLabelProps = ExtractProps<typeof Listbox.Label> & {
   disabled?: boolean;
-  htmlFor: string;
   required?: boolean;
   showHint?: boolean;
 };
@@ -231,9 +229,6 @@ export function Select({
     other.value !== undefined ? other.value : other.defaultValue,
   );
 
-  const generatedIdVar = useId();
-  const idVar = id || generatedIdVar;
-
   const componentClassName = clsx(
     styles['select'],
     fieldNote && styles['select--has-fieldNote'],
@@ -247,7 +242,6 @@ export function Select({
     // Otherwise we get an error.
     as: 'div' as const,
     disabled,
-    id: idVar,
     name,
     ...other,
   };
@@ -293,7 +287,6 @@ export function Select({
         {(label || required) && (
           <Select.Label
             disabled={disabled}
-            htmlFor={idVar}
             required={required}
             showHint={showHint}
           >
@@ -318,7 +311,6 @@ const SelectLabel = ({
   required,
   className,
   disabled,
-  htmlFor,
   showHint,
 }: SelectLabelProps) => {
   const componentClassName = clsx(
@@ -343,7 +335,6 @@ const SelectLabel = ({
         as={FieldLabel}
         className={componentClassName}
         disabled={disabled}
-        htmlFor={htmlFor}
       >
         {label}
       </Listbox.Label>