Merge pull request #820 from lumapps/chore/select-multiple-forward-props

chore(select-multiple): forward props to wrapper
lumapps · Apr 20, 2022 · dc387c4 · dc387c4
2 parents 834000f + b47868f
commit dc387c4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   Added forwarded props to the `SelectMultiple` component.
+
 ## [2.2.15][] - 2022-04-14
 
 ### Fixed

diff --git a/packages/lumx-react/src/components/select/SelectMultiple.test.tsx b/packages/lumx-react/src/components/select/SelectMultiple.test.tsx
@@ -46,6 +46,8 @@ const setup = (props: SetupProps = {}, shallowRendering = true) => {
             (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.info,
         ),
         input: wrapper.find('#select-uid:not(SelectMultipleField)').first(),
+        chip: wrapper.find('Chip'),
+        inputWrapper: wrapper.find('.lumx-select__wrapper'),
         props,
         wrapper,
     };
@@ -188,6 +190,29 @@ describe(`<SelectMultiple>`, () => {
             expect(error).toExist();
             expect(helper).toExist();
         });
+
+        it('should have a data-id as prop', () => {
+            const { inputWrapper } = setup(
+                {
+                    'data-id': 'select',
+                },
+                false,
+            );
+
+            expect(inputWrapper.prop('data-id')).toEqual('select');
+        });
+
+        it('should have a data-id as prop with Chip variant', () => {
+            const { chip } = setup(
+                {
+                    'data-id': 'select',
+                    variant: SelectVariant.chip,
+                },
+                false,
+            );
+
+            expect(chip.prop('data-id')).toEqual('select');
+        });
     });
 
     // 3. Test events.

diff --git a/packages/lumx-react/src/components/select/SelectMultiple.tsx b/packages/lumx-react/src/components/select/SelectMultiple.tsx
@@ -73,6 +73,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     theme,
     value,
     variant,
+    ...forwardedProps
 }) => (
     <>
         {variant === SelectVariant.input && (
@@ -99,6 +100,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                     onKeyDown={handleKeyboardNav}
                     tabIndex={isDisabled ? undefined : 0}
                     aria-disabled={isDisabled || undefined}
+                    {...forwardedProps}
                 >
                     <div className={`${CLASSNAME}__chips`}>
                         {!isEmpty &&
@@ -139,6 +141,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                 onClick={onInputClick}
                 ref={anchorRef as RefObject<HTMLAnchorElement>}
                 theme={theme}
+                {...forwardedProps}
             >
                 {isEmpty && <span>{label}</span>}