[MM-27907] Fixed input focus colour and fixed placeholder focus on mu…

…lti_input (#6182) * [MM-27907] Fixed input focus colour and fixed placeholder focus on multi_input * PR feedback
mattermost · Aug 19, 2020 · aba0ef5 · aba0ef5
1 parent 2529aa0
commit aba0ef5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/components/input.css b/components/input.css
@@ -33,7 +33,8 @@
     color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.Input___focus {
+.Input.Input___focus.a11y--focused {
+    box-shadow: none;
 }
 
 .Input___error, .Input___info {
@@ -79,6 +80,10 @@
     color: var(--button-bg);
 }
 
+.Input_fieldset:focus-within .Input_legend {
+    color: var(--button-bg);
+}
+
 .Input_fieldset___legend {
 }
 
@@ -109,15 +114,15 @@
     padding: 0 4px;
     white-space: nowrap;
     border: none;
+    color: rgba(var(--center-channel-color-rgb), 0.64);
 }
 
-.Input_fieldset___error .Input_legend{
+.Input_fieldset___error .Input_legend, .Input_fieldset___error:focus-within .Input_legend {
     color: var(--error-text);
 }
 
 .Input_legend___focus {
     opacity: 1;
     padding: 0 4px;
     transform: translateY(0);
-    color: var(--button-bg);
 }
diff --git a/components/multi_input.scss b/components/multi_input.scss
@@ -17,6 +17,10 @@
             min-height: 70px;
             padding: 4px;
         }
+
+        &.Input___focus .a11y--focused {
+            box-shadow: none;
+        }
     } 
 
     .Input_legend {

diff --git a/components/multi_input.tsx b/components/multi_input.tsx
@@ -82,7 +82,11 @@ const MultiInput = <T extends ValueType>(props: Props<T>) => {
         <div className='MultiInput Input_container'>
             <fieldset className={fieldsetClass}>
                 <legend className={showLegend ? 'Input_legend Input_legend___focus' : 'Input_legend'}>{showLegend ? (legend || placeholder) : null}</legend>
-                <div className='Input_wrapper'>
+                <div
+                    className='Input_wrapper'
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
+                >
                     {textPrefix && <span>{textPrefix}</span>}
                     <ReactSelect
                         id={`MultiInput_${name}`}
@@ -95,8 +99,6 @@ const MultiInput = <T extends ValueType>(props: Props<T>) => {
                         }}
                         isMulti={true}
                         isClearable={false}
-                        onFocus={onInputFocus}
-                        onBlur={onInputBlur}
                         openMenuOnFocus={false}
                         menuIsOpen={false}
                         placeholder={focused ? '' : placeholder}