fix(TextInput): do not shrink clear button size (#810)

gravity-ui · Jul 14, 2023 · 82808d8 · 82808d8
1 parent 22cc5ff
commit 82808d8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
@@ -85,6 +85,10 @@ $block: '.#{variables.$ns}text-input';
         z-index: 1;
     }
 
+    &__clear {
+        flex-shrink: 0;
+    }
+
     &__error {
         @include mixins.text-body-1();
 

diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
@@ -192,7 +192,11 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                 )}
                 <TextInputControl {...props} {...commonProps} controlRef={handleRef} />
                 {isClearControlVisible && (
-                    <ClearButton size={mapTextInputSizeToButtonSize(size)} onClick={handleClear} />
+                    <ClearButton
+                        size={mapTextInputSizeToButtonSize(size)}
+                        onClick={handleClear}
+                        className={b('clear')}
+                    />
                 )}
                 {isRightContentVisible && (
                     <AdditionalContent placement="right" onClick={handleAdditionalContentClick}>

diff --git a/src/components/controls/TextInput/TextInputControl.tsx b/src/components/controls/TextInput/TextInputControl.tsx
@@ -34,8 +34,8 @@ export function TextInputControl(props: Props) {
 
     return (
         <input
-            {...(controlProps as React.InputHTMLAttributes<HTMLInputElement>)}
-            ref={controlRef as React.Ref<HTMLInputElement>}
+            {...controlProps}
+            ref={controlRef}
             className={b('control', {type: 'input'}, controlProps?.className)}
             type={type}
             name={name}