Merge pull request #4233 from Sage/FE-4218-prevent-focus-when-tile-select-disabled

fix(tile-select): prevent focus outline when tile select is disabled

Author: edleeks87

src/components/tile-select/tile-select.component.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import I18n from "i18n-js";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../utils/helpers/tags/tags";
@@ -68,6 +68,12 @@ const TileSelect = ({
     );
   };
 
+  useEffect(() => {
+    if (disabled && hasFocus) {
+      setHasFocus(false);
+    }
+  }, [disabled, hasFocus]);
+
   return (
     <StyledTileSelectContainer
       checked={checked}

src/components/tile-select/tile-select.spec.js

@@ -381,6 +381,24 @@ describe("TileSelectGroup", () => {
     });
   });
 
+  describe("when input becomes disabled", () => {
+    it("removes the focus outline", () => {
+      wrapper = mount(<TileSelect />);
+
+      wrapper.find(StyledTileSelectInput).first().simulate("focus");
+      expect(wrapper.find(StyledFocusWrapper).first().prop("hasFocus")).toEqual(
+        true
+      );
+
+      wrapper.setProps({ disabled: true });
+      wrapper.update();
+
+      expect(wrapper.find(StyledFocusWrapper).first().prop("hasFocus")).toEqual(
+        false
+      );
+    });
+  });
+
   describe("propTypes", () => {
     it("validates the incorrect children prop", () => {
       jest.spyOn(global.console, "error").mockImplementation(() => {});