Merge pull request #858 from equinor/fix/custom-id-filter

🩹 Add ID prop to Filter component

src/organisms/Filter/Filter.test.tsx

@@ -37,6 +37,20 @@ test('Filter opens/closes as expected when clicking search field', async () => {
   expect(screen.getByText(childText)).toBeInTheDocument();
 });
 
+test('ID works as expected', async () => {
+  const props = fakeProps();
+  const childText = faker.lorem.sentence();
+  const id = faker.lorem.word();
+  render(
+    <Filter {...props} id={id}>
+      <p>{childText}</p>
+    </Filter>
+  );
+  const search = screen.getByRole('searchbox');
+
+  expect(search).toHaveAttribute('id', id);
+});
+
 test('Filter opens/closes as expected when clicking search field with multiple children', async () => {
   const props = fakeProps();
   const childText = faker.lorem.sentence().split(' ');

src/organisms/Filter/Filter.tsx

@@ -30,6 +30,7 @@ export interface FilterProps<T> {
   children: ReactNode | ReactNode[];
   initialOpen?: boolean;
   placeholder?: string;
+  id?: string;
   showClearFiltersButton?: boolean;
 }
 
@@ -43,6 +44,7 @@ export interface FilterProps<T> {
  * @param children - ReactNode or ReactNode[] to display below when the filter is open
  * @param initialOpen - Whether the filter should be open by default, defaults to false
  * @param placeholder - Placeholder text for the search input, defaults to 'Search...'
+ * @param id - ID for the search field
  * @param showClearFiltersButton - Whether to show the clear filters button, defaults to true
  */
 export function Filter<T>({
@@ -55,6 +57,7 @@ export function Filter<T>({
   children,
   initialOpen = false,
   placeholder = 'Search...',
+  id = 'filter-search',
   showClearFiltersButton = true,
 }: FilterProps<T>) {
   const [open, setOpen] = useState(initialOpen);
@@ -111,7 +114,7 @@ export function Filter<T>({
             </StyledChip>
           ))}
           <SearchField
-            id="filter-search"
+            id={id}
             type="search"
             value={search}
             placeholder={placeholder}