Merge pull request #3540 from risenforces/is-active-example

Fix issue with disabled options and add some docs examples for :active
JedWatson · May 6, 2019 · b37edfd · b37edfd
2 parents 292bad3 + 52b1ade
commit b37edfd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/docs/examples/StyledMulti.js b/docs/examples/StyledMulti.js
@@ -19,6 +19,11 @@ const colourStyles = {
           ? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
           : data.color,
       cursor: isDisabled ? 'not-allowed' : 'default',
+
+      ':active': {
+        ...styles[':active'],
+        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
+      },
     };
   },
   multiValue: (styles, { data }) => {

diff --git a/docs/examples/StyledSingle.js b/docs/examples/StyledSingle.js
@@ -34,6 +34,11 @@ const colourStyles = {
           ? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
           : data.color,
       cursor: isDisabled ? 'not-allowed' : 'default',
+
+      ':active': {
+        ...styles[':active'],
+        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
+      },
     };
   },
   input: styles => ({ ...styles, ...dot() }),

diff --git a/src/components/Option.js b/src/components/Option.js
@@ -59,7 +59,7 @@ export const optionCSS = ({
 
   // provide some affordance on touch devices
   ':active': {
-    backgroundColor: isSelected ? colors.primary : colors.primary50,
+    backgroundColor: !isDisabled && (isSelected ? colors.primary : colors.primary50),
   },
 });