diff --git a/src/components/tile-select/tile-select.component.js b/src/components/tile-select/tile-select.component.js index 7e6cdf01e3..3ff1d8b414 100644 --- a/src/components/tile-select/tile-select.component.js +++ b/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 ( { }); }); + describe("when input becomes disabled", () => { + it("removes the focus outline", () => { + wrapper = mount(); + + 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(() => {});