fix(react): prevent search field input from inheriting unintended sty…

…les from default TextField (#1425)
dequelabs · Mar 21, 2024 · c76774e · c76774e
1 parent b36202a
commit c76774e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 33 deletions.
diff --git a/packages/react/src/components/SearchField/SearchField.test.tsx b/packages/react/src/components/SearchField/SearchField.test.tsx
@@ -144,10 +144,9 @@ test('should support ref prop', () => {
 
 test('should support className prop', () => {
   render({ label: 'search field', className: 'banana' });
-  expect(screen.getByRole('searchbox', { name: 'search field' })).toHaveClass(
-    'Field__text-input',
-    'banana'
-  );
+  expect(
+    screen.getByRole('searchbox', { name: 'search field' }).parentElement
+  ).toHaveClass('TextFieldWrapper', 'banana');
 });
 
 test('should support name prop', () => {

diff --git a/packages/react/src/components/SearchField/index.tsx b/packages/react/src/components/SearchField/index.tsx
@@ -27,6 +27,7 @@ interface SearchFieldProps
 const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
+      className,
       label,
       defaultValue = '',
       onChange,
@@ -36,7 +37,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       id: propId,
       value: propValue,
       trailingChildren,
-      ...otherProps
+      ...inputProps
     }: SearchFieldProps,
     ref
   ) => {
@@ -90,8 +91,8 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           </label>
         )}
         <TextFieldWrapper
-          className={classNames({
-            'TextFieldWrapper--disabled': otherProps.disabled
+          className={classNames(className, {
+            'TextFieldWrapper--disabled': inputProps.disabled
           })}
         >
           <Icon type="magnifying-glass" className="SearchField__search-icon" />
@@ -101,8 +102,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             onChange={handleChange}
             placeholder={placeholder}
             ref={ref}
-            {...otherProps}
-            className={classNames(otherProps.className, 'Field__text-input')}
+            {...inputProps}
             type="search"
           />
           {trailingChildren}

diff --git a/packages/react/src/components/internal/TextFieldWrapper/TextFieldWrapper.test.tsx b/packages/react/src/components/internal/TextFieldWrapper/TextFieldWrapper.test.tsx
@@ -1,51 +1,60 @@
 import React from 'react';
-import { render as testingRender, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 import { axe } from 'jest-axe';
 
 import TextFieldWrapper, { TextFieldWrapperProps } from './';
 
-type RenderProps = Partial<TextFieldWrapperProps> & {
-  [key: string]: any;
-};
-
-const render = ({ className, children, ...otherProps }: RenderProps = {}) =>
-  testingRender(
-    <TextFieldWrapper className={className} {...otherProps}>
-      {children || <p>Children</p>}
+test('should render children', () => {
+  render(
+    <TextFieldWrapper>
+      <p>Children</p>
     </TextFieldWrapper>
   );
-
-test('should render children', () => {
-  render();
   expect(screen.getByText('Children')).toBeInTheDocument();
 });
 
-test('should render TextFieldWrapper with default className', () => {
-  render();
-  expect(screen.getByText('Children').parentElement).toHaveClass(
-    'TextFieldWrapper'
+test('should support className prop', () => {
+  render(
+    <TextFieldWrapper className="banana">
+      <input />
+    </TextFieldWrapper>
   );
-});
-
-test('should render TextFieldWrapper with custom className', () => {
-  render({ className: 'banana' });
-  expect(screen.getByText('Children').parentElement).toHaveClass(
+  expect(screen.getByRole('textbox').parentElement).toHaveClass(
     'TextFieldWrapper',
     'banana'
   );
 });
 
+test('should support ref prop', () => {
+  const ref = React.createRef<HTMLDivElement>();
+  render(
+    <TextFieldWrapper className="banana" ref={ref}>
+      <input />
+    </TextFieldWrapper>
+  );
+  expect(ref.current).toBeDefined();
+  expect(ref.current).toBeInstanceOf(HTMLDivElement);
+});
+
 test('should render TextFieldWrapper with other props', () => {
-  render({ id: 'banana' });
-  expect(screen.getByText('Children').parentElement).toHaveAttribute(
+  render(
+    <TextFieldWrapper id="banana">
+      <input />
+    </TextFieldWrapper>
+  );
+  expect(screen.getByRole('textbox').parentElement).toHaveAttribute(
     'id',
     'banana'
   );
 });
 
 test('should have no axe violations with TextFieldWrapper', async () => {
-  const { container } = render();
+  const { container } = render(
+    <TextFieldWrapper>
+      <p>Children</p>
+    </TextFieldWrapper>
+  );
   expect(await axe(container)).toHaveNoViolations();
 });
diff --git a/packages/styles/text-field-wrapper.css b/packages/styles/text-field-wrapper.css
@@ -55,6 +55,7 @@
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--text-field-wrapper-background-color);
+  min-width: min(var(--input-min-width), 100%);
 }
 
 .cauldron--theme-dark .TextFieldWrapper {