Select HTML5 & InputNew fixes (#1038)

* fix(Select): HTML5 default value and style fixes

* fix(Select/InputNew): controlled by props, minor style fixes

* fix(InputNew): id should not be optional

Author: billgil

packages/core/src/lib/Input/Input.styles.ts

@@ -69,12 +69,6 @@ const DivWrapperStyled = styled.div<Pick<InputProps, 'state' | 'size'>>`
         }
     }
 
-    :not(&:focus-within) {
-        &.input_filled {
-            outline-color: ${color.navy30} !important;
-        }
-    }
-
     &:focus-within,
     &.input_filled {
         outline: 2px solid ${color.navy40};

packages/core/src/lib/InputNew/Input.tsx

@@ -134,21 +134,21 @@ const Input: React.FC<IInputProps> = ({
                     <InputBase
                         autoComplete={autoComplete}
                         autoFocus={autoFocus}
-                        maxLength={validation?.maxLength || props.maxLength}
-                        minLength={validation?.minLength || props.minLength}
-                        defaultValue={value || props.defaultValue}
                         disabled={disabled || state === 'disabled'}
                         id={id || 'web3uiKit-input'}
                         max={validation?.max || props.max}
+                        maxLength={validation?.maxLength || props.maxLength}
                         min={validation?.min || props.min}
+                        minLength={validation?.minLength || props.minLength}
                         onBlur={(e) => onBlurEvent(e)}
                         onChange={(e) => onChangeEvent(e)}
                         onFocus={(e) => onFocusEvent(e)}
-                        placeholder={placeholder}
                         pattern={validation?.pattern || props.pattern}
+                        placeholder={placeholder}
                         required={validation?.required || props.required}
                         testid="test-input-input"
                         type={inputType}
+                        value={currentValue}
                     />
 
                     {slots &&

packages/core/src/lib/InputNew/atoms/InputBase.tsx

@@ -7,14 +7,13 @@ const { InputStyled } = styles;
 const InputBase: FC<IInputBaseProps> = ({
     autoComplete = true,
     autoFocus = false,
-    maxLength,
-    minLength,
-    defaultValue,
     disabled = false,
     id,
-    name,
     max,
+    maxLength,
     min,
+    minLength,
+    name,
     onBlur,
     onChange,
     onFocus,
@@ -23,6 +22,7 @@ const InputBase: FC<IInputBaseProps> = ({
     required,
     testid,
     type = 'text',
+    value,
     ...props
 }) => {
     return (
@@ -31,7 +31,6 @@ const InputBase: FC<IInputBaseProps> = ({
             autoFocus={autoFocus}
             disabled={disabled}
             data-testid={testid}
-            defaultValue={defaultValue}
             id={id || 'input-base'}
             max={type === 'number' ? max : undefined}
             maxLength={maxLength}
@@ -51,6 +50,7 @@ const InputBase: FC<IInputBaseProps> = ({
             placeholder={placeholder}
             required={required}
             type={type}
+            value={value}
             {...props}
         />
     );

packages/core/src/lib/InputNew/atoms/types.ts

@@ -50,11 +50,6 @@ export interface IInputBaseProps extends TValidateInput {
      */
     autoFocus?: boolean;
 
-    /**
-     * pass a value to be rendered in the input
-     */
-    defaultValue?: string | number;
-
     /**
      * disable the input so the user cannot interact with it
      */
@@ -63,7 +58,7 @@ export interface IInputBaseProps extends TValidateInput {
     /**
      * input needs an ID so it can relate to its label
      */
-    id?: string;
+    id: string;
 
     /**
      * name text for input accessibility
@@ -99,6 +94,11 @@ export interface IInputBaseProps extends TValidateInput {
      * the type of the HTML input: text | number | email | tel | password;
      */
     type?: 'text' | 'number' | 'email' | 'tel' | 'password';
+
+    /**
+     * pass a value to be rendered in the input
+     */
+    value?: string | number;
 }
 
 export interface ILabelBaseProps {

packages/core/src/lib/Select/Select.stories.tsx

@@ -234,55 +234,41 @@ Description.args = {
 export const HTML5Select = Template.bind({});
 HTML5Select.args = {
     label: 'Good old HTML5',
-    onChangeTraditional: onTestOptionChange,
     options: smallOptionsList,
     traditionalHTML5: true,
     validation: { required: true },
 };
 
-export const HTML5ValueBinded = Template.bind({});
-HTML5Select.args = {
-    label: 'Good old HTML5',
-    onChangeTraditional: onTestOptionChange,
-    options: smallOptionsList,
-    traditionalHTML5: true,
-    validation: { required: true },
-    value: 'dapp',
-};
-
-export const HTML5DescriptionAndPlaceholder = Template.bind({});
-HTML5DescriptionAndPlaceholder.args = {
-    description: 'Much Needed',
+export const HTML5SelectValue = Template.bind({});
+HTML5SelectValue.args = {
     label: 'Good old HTML5',
-    placeholder: 'Select',
-    onChangeTraditional: onTestOptionChange,
-    options: smallOptionsList,
+    options: testOptionsHTML5,
     traditionalHTML5: true,
-    validation: { required: true },
+    value: testOptionsHTML5[1]?.label,
 };
 
 export const HTML5SelectDefault = Template.bind({});
 HTML5SelectDefault.args = {
     label: 'Good old HTML5',
-    onChangeTraditional: onTestOptionChange,
     options: testOptionsHTML5,
     traditionalHTML5: true,
     defaultOptionIndex: 0,
 };
 
-export const HTML5SelectValue = Template.bind({});
-HTML5SelectValue.args = {
+export const HTML5DescriptionAndPlaceholder = Template.bind({});
+HTML5DescriptionAndPlaceholder.args = {
+    description: 'Much Needed',
     label: 'Good old HTML5',
-    onChangeTraditional: onTestOptionChange,
-    options: testOptionsHTML5,
+    placeholder: 'Select',
+    options: smallOptionsList,
     traditionalHTML5: true,
-    value: testOptionsHTML5[1]?.label,
+    validation: { required: true },
 };
 
 export const HTML5SelectDisabled = Template.bind({});
 HTML5SelectDisabled.args = {
+    disabled: true,
     label: 'Good old HTML5',
-    onChangeTraditional: onTestOptionChange,
     options: testDisabledOptions,
     placeholder: 'Title 1',
     traditionalHTML5: true,

packages/core/src/lib/Select/TraditionalSelect/TraditionalSelect.tsx

@@ -11,7 +11,7 @@ const TraditionalSelect: React.FC<ISelectProps> = ({
     description,
     disabled = false,
     errorMessage = '',
-    id,
+    id = 'web3uikit-select',
     label,
     onBlurTraditional,
     onChange,
@@ -30,48 +30,65 @@ const TraditionalSelect: React.FC<ISelectProps> = ({
     width = '200px',
     ...props
 }: ISelectProps) => {
-    const defaultValue =
-        (defaultOptionIndex !== undefined &&
-            options[defaultOptionIndex]?.label) ||
-        value ||
-        placeholder ||
-        'Please choose';
+    const [currentValue, setCurrentValue] = useState<
+        string | number | string[]
+    >();
+
+    useEffect(() => {
+        if (!value) return;
+        setCurrentValue(value);
+    }, [value]);
+
+    useEffect(() => {
+        if (Number(defaultOptionIndex) < 0) return;
+        if (Number(defaultOptionIndex) > options.length) return;
+
+        setCurrentValue(options[Number(defaultOptionIndex)]?.label || '');
+    }, [defaultOptionIndex]);
+
+    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        setCurrentValue(event.currentTarget.value);
+        onChangeTraditional && onChangeTraditional(event);
+    };
+
     return (
         <DivWrapperStyled
-            className="input_filled"
+            className="input_filled select"
             data-testid="test-select"
+            state={state}
             style={{ ...style, width }}
             {...props}
         >
             <SelectStyled
                 data-testid="test-select-select"
-                defaultValue={defaultValue}
+                disabled={disabled}
                 id={id}
                 ref={refTraditional}
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                    onChangeTraditional && onChangeTraditional(event)
+                    handleChange(event)
                 }
                 onBlur={(event: React.FocusEvent<HTMLSelectElement>) =>
                     onBlurTraditional && onBlurTraditional(event)
                 }
                 required={validation?.required}
-                value={value}
+                value={currentValue || placeholder || 'Please choose'}
             >
                 <option disabled>{placeholder || 'Please choose'}</option>
 
                 {options.map((option, i) => (
                     <option
                         data-testid={`test-select-option-${i}`}
+                        disabled={option.disabled || false}
                         id={String(option?.id)}
                         key={option?.id}
-                        value={option?.id}
-                        disabled={option.disabled || false}
+                        value={option?.label}
                     >
                         {option?.prefix}
                         {option?.label}
                     </option>
                 ))}
             </SelectStyled>
+
             {label && (
                 <LabelStyledTrad
                     data-testid="test-select-label"