From 621d652854bce49f052bade81192181da08bb3d8 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sun, 27 Dec 2020 10:52:40 -0800 Subject: [PATCH] Fix focusring on disabled inputs --- resources/scripts/components/elements/Input.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx index c12792e8f..21845d5b0 100644 --- a/resources/scripts/components/elements/Input.tsx +++ b/resources/scripts/components/elements/Input.tsx @@ -39,7 +39,7 @@ const inputStyle = css` resize: none; ${tw`appearance-none outline-none w-full min-w-0`}; ${tw`p-3 border-2 rounded text-sm transition-all duration-150`}; - ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`}; + ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none focus:ring-0`}; & + .input-help { ${tw`mt-1 text-xs`}; @@ -52,6 +52,7 @@ const inputStyle = css` &:not(:disabled):not(:read-only):focus { ${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`}; + ${props => props.hasError && tw`border-red-300 ring-red-200`}; } &:disabled { @@ -59,7 +60,7 @@ const inputStyle = css` } ${props => props.isLight && light}; - ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300 focus:border-red-300! focus:ring-red-200!`}; + ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`}; `; const Input = styled.input`