refactor(inputs): adjust missing parts

commercetools · Dec 18, 2024 · 85bfc0a · 85bfc0a
1 parent 48f9768
commit 85bfc0a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 22 deletions.
diff --git a/packages/components/inputs/checkbox-input/src/checkbox-input.tsx b/packages/components/inputs/checkbox-input/src/checkbox-input.tsx
@@ -232,7 +232,13 @@ const CheckboxInput = ({
       isHovered={props.isHovered}
       isIndeterminate={props.isIndeterminate}
     >
-      <Checkbox {...props} id={id} />
+      <Checkbox
+        {...props}
+        id={id}
+        isChecked={isChecked}
+        isDisabled={isDisabled}
+        hasError={hasError}
+      />
       <CheckboxIcon
         hasError={hasError}
         isDisabled={isDisabled}

diff --git a/packages/components/inputs/radio-input/src/radio-option.tsx b/packages/components/inputs/radio-input/src/radio-option.tsx
@@ -62,7 +62,7 @@ export type TStylesProps = Pick<
   | 'isChecked'
 >;
 
-const Option = ({ ...props }: TOptionProps) => {
+const Option = (props: TOptionProps) => {
   const labelProps = props.id ? { htmlFor: props.id } : {};
 
   if (!props.isReadOnly) {
@@ -120,9 +120,7 @@ const Option = ({ ...props }: TOptionProps) => {
           checked={props.isChecked}
           type="radio"
           readOnly={props.isReadOnly}
-          {...filterDataAttributes({
-            ...props,
-          })}
+          {...filterDataAttributes(props)}
         />
         <RadioOptionContainer {...stylesProps}>
           <RadioOptionBorder {...stylesProps}>
@@ -143,4 +141,8 @@ const Option = ({ ...props }: TOptionProps) => {
 };
 Option.displayName = 'RadioOption';
 
+Option.defaultProps = {
+  components: {},
+};
+
 export default Option;
diff --git a/packages/components/inputs/search-select-input/src/search-select-input.tsx b/packages/components/inputs/search-select-input/src/search-select-input.tsx
@@ -361,6 +361,11 @@ const SearchSelectInput = ({
     >
       <AsyncSelectInput
         {...props}
+        value={value}
+        menuPortalZIndex={menuPortalZIndex}
+        maxMenuHeight={maxMenuHeight}
+        appearance={appearance}
+        optionStyle={optionStyle}
         components={components as ReactSelectAsyncProps['components']}
         placeholder={placeholder}
         iconLeft={props.iconLeft}

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx
@@ -60,6 +60,8 @@ const TestComponent = ({
       </label>
       <SelectableSearchInput
         {...props}
+        id={id}
+        name={name}
         options={options}
         value={_value}
         onSubmit={onSubmit}

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
@@ -273,6 +273,14 @@ const SelectableSearchInput = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const textInputRef = useRef<HTMLInputElement>(null);
 
+  const allProps = {
+    horizontalConstraint,
+    isClearable,
+    menuHorizontalConstraint,
+    showSubmitButton,
+    menuPortalZIndex,
+    ...props,
+  };
   const legacyDataProps = filterDataAttributes(props);
   const transformedSelectDataProps = transformDataProps(props.selectDataProps);
   const transformedInputDataProps = transformDataProps(props.inputDataProps);
@@ -452,7 +460,7 @@ const SelectableSearchInput = ({
       >
         <Constraints.Horizontal max={menuHorizontalConstraint}>
           <SelectableSelect
-            {...props}
+            {...allProps}
             id={SelectableSearchInput.getDropdownId(selectablSearchInputId)}
             name={getDropdownName(props.name)}
             dropdownHasFocus={dropdownHasFocus}
@@ -468,10 +476,7 @@ const SelectableSearchInput = ({
         </Constraints.Horizontal>
         <div
           css={[
-            getSelectableSearchInputContainerStyles({
-              horizontalConstraint,
-              ...props,
-            }),
+            getSelectableSearchInputContainerStyles(allProps),
             dropdownHasFocus &&
               !props.isReadOnly &&
               css`
@@ -498,10 +503,7 @@ const SelectableSearchInput = ({
             autoComplete={props.autoComplete}
             aria-readonly={props.isReadOnly}
             contentEditable={!props.isReadOnly}
-            css={getSelectableSearchInputStyles({
-              horizontalConstraint,
-              ...props,
-            })}
+            css={getSelectableSearchInputStyles(allProps)}
             {...transformedInputDataProps}
             {...legacyDataProps}
             /* ARIA */
@@ -523,10 +525,7 @@ const SelectableSearchInput = ({
                 size={props.isCondensed ? '10' : '20'}
                 label={'clear-button'}
                 onClick={handleClear}
-                css={getClearIconButtonStyles({
-                  horizontalConstraint,
-                  ...props,
-                })}
+                css={getClearIconButtonStyles(allProps)}
               />
             )}
           {showSubmitButton && (
@@ -535,10 +534,7 @@ const SelectableSearchInput = ({
               size={props.isCondensed ? '20' : '40'}
               label={'search-button'}
               onClick={handleSubmit}
-              css={getSearchIconButtonStyles({
-                horizontalConstraint,
-                ...props,
-              })}
+              css={getSearchIconButtonStyles(allProps)}
               isDisabled={props.isDisabled}
             />
           )}