Added focus styles for single options

RedTurtle · Jul 10, 2023 · 3c65c91 · 3c65c91
1 parent 23602fd
commit 3c65c91
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
@@ -47,7 +47,8 @@ const messages = defineMessages({
       'premi la freccia a sinistra per evidenziare i valori selezionati',
   },
   ay11_toggle_values: {
-    id: 'ay11_select_Use left and right to toggle between focused values, press Backspace to remove the currently focused value',
+    id:
+      'ay11_select_Use left and right to toggle between focused values, press Backspace to remove the currently focused value',
     defaultMessage:
       'Usa le frecce destra e sinistra per attivare o disattivare i valori evidenziati, premi Backspace per rimuovere il valore corrente evidenziato',
   },
@@ -176,8 +177,13 @@ ClearIndicator.propTypes = {
 const getSelectAriaLiveMessages = (intl) => {
   return {
     guidance: (props) => {
-      const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } =
-        props;
+      const {
+        isSearchable,
+        isMulti,
+        isDisabled,
+        tabSelectsValue,
+        context,
+      } = props;
       switch (context) {
         case 'menu':
           return `${intl.formatMessage(messages.ay11_up_down)}${
@@ -338,6 +344,16 @@ const SelectInput = ({
           }`
         }
         classNamePrefix={'react-select'}
+        styles={{
+          option: (base) => ({
+            ...base,
+            ':focus': {
+              'border-color': 'hsl(36deg, 100%, 50%) !important',
+              'box-shadow': '0 0 0 2px hsl(36deg, 100%, 50%) !important',
+              outline: 'none !important',
+            },
+          }),
+        }}
       />
     </div>
   );

diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
@@ -218,6 +218,7 @@ body.cms-ui {
 
   .react-select__menu {
     z-index: 11;
+
     /* FIX CT SELECT REACTVIRTUALIZED */
     .ReactVirtualized__Grid.ReactVirtualized__List {
       width: 100% !important;