feat: improve read-only behaviour (PDS-200) (#502)

core-ds · Feb 11, 2021 · 3b3c5e6 · 3b3c5e6
1 parent 0b3c159
commit 3b3c5e6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/packages/input-autocomplete/src/autocomplete-field/Component.tsx b/packages/input-autocomplete/src/autocomplete-field/Component.tsx
@@ -24,7 +24,9 @@ export const AutocompleteField = ({
 }: AutocompleteFieldProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const { onClick } = innerProps;
+    const { onClick, onFocus } = innerProps;
+
+    const inputDisabled = disabled || readOnly;
 
     const handleClick = useCallback(
         event => {
@@ -53,7 +55,8 @@ export const AutocompleteField = ({
             success={success}
             hint={hint}
             onChange={onInput}
-            onClick={handleClick}
+            onClick={inputDisabled ? undefined : handleClick}
+            onFocus={inputDisabled ? undefined : onFocus}
             autoComplete='off'
             value={value}
             rightAddons={

diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -209,13 +209,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
         const handleInputFocus = useCallback(
             (event: React.FocusEvent<HTMLInputElement>) => {
-                setFocused(true);
+                if (!readOnly) {
+                    setFocused(true);
+                }
 
                 if (onFocus) {
                     onFocus(event);
                 }
             },
-            [onFocus],
+            [onFocus, readOnly],
         );
 
         const handleInputBlur = useCallback(

diff --git a/packages/input/src/index.module.css b/packages/input/src/index.module.css
@@ -95,13 +95,6 @@
     color: var(--input-disabled-color);
 }
 
-/* READ-ONLY STATE */
-
-.input:read-only {
-    cursor: var(--disabled-cursor);
-    color: var(--input-read-only-color);
-}
-
 /* FOCUS STATE */
 
 .input:focus.hasLabel::placeholder {
@@ -116,6 +109,21 @@
     @mixin focus-outline;
 }
 
+/* READ-ONLY STATE */
+
+.input:read-only {
+    cursor: var(--disabled-cursor);
+    color: var(--input-read-only-color);
+
+    &:focus::placeholder {
+        color: var(--input-placeholder-color);
+    }
+}
+
+.hasLabel:read-only:focus::placeholder {
+    opacity: 0;
+}
+
 /* IE hide clear */
 
 .input::-ms-clear {

diff --git a/packages/with-suffix/src/index.module.css b/packages/with-suffix/src/index.module.css
@@ -10,7 +10,7 @@
     pointer-events: none;
 }
 
-input:focus + .suffixContainer,
+input:focus:not(:read-only) + .suffixContainer,
 .suffixVisible .suffixContainer {
     display: inline-flex;
 }