wrap main control and endControls with position: relative element to …

…avoid drooping triangle (#2339)
folio-org · Aug 19, 2024 · cb028f8 · cb028f8
1 parent 0ccd65a
commit cb028f8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@
 * `<FilterAccordionHeader>` - move focus to accordion header after clear button is pressed. Refs STCOM-1330.
 * Remove `tabIndex="-1"` from `<Datepicker>`'s clear button, placing it in tab order. Refs STCOM-1322.
 * `<MultiSelection>` Bugfix - remove filter value after an item is selected. Refs STCOM-1324.
+* Fix visual issue with `<Selection>` where dropdown caret shifts downward when a validation message is present. Refs STCOM-1323.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

diff --git a/lib/Selection/Selection.js b/lib/Selection/Selection.js
@@ -341,28 +341,30 @@ const Selection = ({
         </Label>
       )}
       <div className={css.selectionControlContainer}>
-        <button
-          type="button"
-          {...getToggleButtonProps({
-            ref: controlRef,
-            tabIndex: undefined,
-            disabled,
-            readOnly,
-            id: testId,
-            'aria-labelledby': `${labelId} ${valueId}`
-          })}
-          className={getControlClass}
-          autoFocus={autofocus}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          name={name}
-          value={selectedItem?.value}
-        >
-          <span className="sr-only">{formatMessage({ id: 'stripes-components.selection.controlLabel' })}</span>
-          <div className={css.singleValue} id={valueId}>{valueLabel}</div>
-        </button>
-        <div className={css.selectionEndControls}>
-          <TextFieldIcon icon="triangle-down" />
+        <div className={formStyles.inputGroup}>
+          <button
+            type="button"
+            {...getToggleButtonProps({
+              ref: controlRef,
+              tabIndex: undefined,
+              disabled,
+              readOnly,
+              id: testId,
+              'aria-labelledby': `${labelId} ${valueId}`
+            })}
+            className={getControlClass}
+            autoFocus={autofocus}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            name={name}
+            value={selectedItem?.value}
+          >
+            <span className="sr-only">{formatMessage({ id: 'stripes-components.selection.controlLabel' })}</span>
+            <div className={css.singleValue} id={valueId}>{valueLabel}</div>
+          </button>
+          <div className={css.selectionEndControls}>
+            <TextFieldIcon icon="triangle-down" />
+          </div>
         </div>
         <div role="alert">
           {warning && <div className={`${formStyles.feedbackWarning}`}>{warning}</div>}