fix(picker-button): wrap field with div

#914
core-ds · Dec 9, 2021 · b51bce8 · b51bce8
1 parent 4b32bf3
commit b51bce8
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 76 deletions.
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -9,46 +9,48 @@ exports[`Snapshots tests should display correctly 1`] = `
     role="combobox"
     tabindex="-1"
   >
-    <button
-      aria-controls="downshift-1-menu"
-      aria-labelledby="downshift-1-label"
-      class="component secondary m component secondary block withRightAddons component"
-      id="downshift-0-input"
-      tabindex="0"
-      type="button"
-    >
-      <span
-        class="text"
+    <div>
+      <button
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
+        class="component secondary m component secondary block withRightAddons component"
+        id="downshift-0-input"
+        tabindex="0"
+        type="button"
       >
         <span
-          for="downshift-0-input"
-          id="downshift-1-label"
+          class="text"
         >
-          some label
+          <span
+            for="downshift-0-input"
+            id="downshift-1-label"
+          >
+            some label
+          </span>
         </span>
-      </span>
-      <span
-        class="addons"
-      >
         <span
-          class="iconContainer"
+          class="addons"
         >
-          <svg
-            data-test-id="picker-button-icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
+          <span
+            class="iconContainer"
           >
-            <path
-              d="M16.074 9.646l.708.708-5.068 5.068-5.068-5.068.708-.708 4.36 4.362z"
-            />
-          </svg>
+            <svg
+              data-test-id="picker-button-icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M16.074 9.646l.708.708-5.068 5.068-5.068-5.068.708-.708 4.36 4.362z"
+              />
+            </svg>
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -63,36 +65,38 @@ exports[`Snapshots tests should display opened correctly 1`] = `
     role="combobox"
     tabindex="-1"
   >
-    <button
-      aria-controls="downshift-3-menu"
-      aria-labelledby="downshift-3-label"
-      class="component secondary m component secondary block iconOnly component"
-      id="downshift-2-input"
-      tabindex="0"
-      type="button"
-    >
-      <span
-        class="addons"
+    <div>
+      <button
+        aria-controls="downshift-3-menu"
+        aria-labelledby="downshift-3-label"
+        class="component secondary m component secondary block iconOnly component"
+        id="downshift-2-input"
+        tabindex="0"
+        type="button"
       >
         <span
-          class="iconContainer open"
+          class="addons"
         >
-          <svg
-            data-test-id="picker-button-icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
+          <span
+            class="iconContainer open"
           >
-            <path
-              d="M16.074 9.646l.708.708-5.068 5.068-5.068-5.068.708-.708 4.36 4.362z"
-            />
-          </svg>
+            <svg
+              data-test-id="picker-button-icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M16.074 9.646l.708.708-5.068 5.068-5.068-5.068.708-.708 4.36 4.362z"
+              />
+            </svg>
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;

diff --git a/packages/picker-button/src/field/Component.tsx b/packages/picker-button/src/field/Component.tsx
@@ -30,25 +30,29 @@ export const Field = ({
 }: FieldProps) => {
     const Icon: FC<SVGProps<SVGSVGElement>> = buttonSize === 'xs' ? ArrowDownSIcon : ArrowDownMIcon;
 
+    const { ref, ...restInnerProps } = innerProps;
+
     const buttonProps = {
         ...restProps,
-        ...innerProps,
+        ...restInnerProps,
     } as ButtonHTMLAttributes<HTMLButtonElement>;
 
     return (
-        <Button
-            {...buttonProps}
-            rightAddons={
-                <span className={cn(styles.iconContainer, open && styles.open)}>
-                    <Icon data-test-id='picker-button-icon' />
-                </span>
-            }
-            block={true}
-            view={view}
-            size={buttonSize}
-            className={cn(styles.component, view === 'primary' && styles.primary, className)}
-        >
-            {label}
-        </Button>
+        <div ref={ref}>
+            <Button
+                {...buttonProps}
+                rightAddons={
+                    <span className={cn(styles.iconContainer, open && styles.open)}>
+                        <Icon data-test-id='picker-button-icon' />
+                    </span>
+                }
+                block={true}
+                view={view}
+                size={buttonSize}
+                className={cn(styles.component, view === 'primary' && styles.primary, className)}
+            >
+                {label}
+            </Button>
+        </div>
     );
 };
diff --git a/packages/select/src/docs/description.mdx b/packages/select/src/docs/description.mdx
@@ -312,11 +312,16 @@ const options = [
 render(<Select label='With addons' options={options} Field={CustomField} />);
 ```
 
+Для корректой работы выпадающего списка с компонентом `Button`,
+необходимо сделать обертку над компонентом кнопки и передать обертке `ref`
+
 ```tsx live
-const CustomField = ({ selected, innerProps, ...restProps }) => (
-    <Button {...innerProps} size='xs'>
-        {selected ? selected.content : 'Pick'}
-    </Button>
+const CustomField = ({ selected, innerProps: { ref, ...restInnerProps }, ...restProps }) => (
+    <div ref={ref}>
+        <Button {...restInnerProps} {...restProps} size='xs'>
+            {selected ? selected.content : 'Pick'}
+        </Button>
+    </div>
 );
 
 const options = [