(SingleSelectField) Dont allow to select option when it is disabled (#1870)

* fix(SingleSelectField): dont allow to select an option when it is disabled

* feat(storybook): add story to the SingleSelectField

* fix(storybook): update snapshot

src/components/SingleSelectField/SingleSelectField.tsx

@@ -10,6 +10,7 @@ import {
 import { SelectProps } from "@material-ui/core/Select";
 import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -31,6 +32,9 @@ const useStyles = makeStyles(
     },
     paper: {
       maxHeight: `calc(${singleSelectFieldItemHeight}px * 10 + ${singleSelectFieldItemHeight}px * 0.5)`
+    },
+    disabledMenuItem: {
+      pointerEvents: "none"
     }
   }),
   { name: "SingleSelectField" }
@@ -127,6 +131,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
           choices.map(choice => (
             <MenuItem
               disabled={choice.disabled}
+              className={clsx(choice.disabled && classes.disabledMenuItem)}
               data-test-id={"select-field-option-" + choice.value}
               value={choice.value}
               key={choice.value}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -14063,6 +14063,74 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / SingleSelectField with disabled options 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="MuiFormControl-root-id SingleSelectField-formControl-id"
+      >
+        <label
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          data-shrink="false"
+        />
+        <div
+          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+        >
+          <div
+            aria-haspopup="listbox"
+            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
+            role="button"
+            tabindex="0"
+          >
+            <span>
+              ​
+            </span>
+          </div>
+          <input
+            aria-hidden="true"
+            class="MuiSelect-nativeInput-id"
+            tabindex="-1"
+            value=""
+          />
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7 10l5 5 5-5z"
+            />
+          </svg>
+          <fieldset
+            aria-hidden="true"
+            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+            style="padding-left:8px"
+          >
+            <legend
+              class="PrivateNotchedOutline-legend-id"
+              style="width:0.01px"
+            >
+              <span>
+                ​
+              </span>
+            </legend>
+          </fieldset>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
 <div
   style="padding:24px"

src/storybook/stories/components/SingleSelectField.tsx

@@ -31,6 +31,13 @@ const manyChoices = [
   { label: "Petrol", value: "16" }
 ];
 
+const disabledChoices = [
+  { label: "Apparel", value: "1" },
+  { label: "Groceries", value: "2", disabled: true },
+  { label: "Books", value: "3", disabled: true },
+  { label: "Accessories", value: "4" }
+];
+
 storiesOf("Generics / SingleSelectField", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
@@ -89,4 +96,7 @@ storiesOf("Generics / SingleSelectField", module)
       hint="Lorem error"
       error={true}
     />
+  ))
+  .add("with disabled options", () => (
+    <SingleSelectField choices={disabledChoices} onChange={undefined} />
   ));