refactor(console): change number input appearance to text input (#3620)

packages/console/src/components/TextInput/index.module.scss

@@ -71,6 +71,16 @@
         height: 18px;
       }
     }
+
+    &[type='number'] {
+      -moz-appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
 
   &.disabled {

packages/console/src/components/TextInput/index.tsx

@@ -1,6 +1,15 @@
+import { type Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
-import type { HTMLProps, ForwardedRef, ReactElement } from 'react';
-import { cloneElement, forwardRef } from 'react';
+import {
+  type HTMLProps,
+  type ReactElement,
+  useImperativeHandle,
+  useRef,
+  cloneElement,
+  forwardRef,
+  type Ref,
+  useEffect,
+} from 'react';
 
 import * as styles from './index.module.scss';
 
@@ -20,10 +29,36 @@ function TextInput(
     disabled,
     className,
     readOnly,
+    type = 'text',
     ...rest
   }: Props,
-  reference: ForwardedRef<HTMLInputElement>
+  reference: Ref<Nullable<HTMLInputElement>>
 ) {
+  const innerRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(reference, () => innerRef.current);
+
+  useEffect(() => {
+    if (type !== 'number') {
+      return;
+    }
+
+    const input = innerRef.current;
+
+    if (!input) {
+      return;
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault();
+    };
+
+    input.addEventListener('wheel', handleWheel, { passive: false });
+
+    return () => {
+      input.removeEventListener('wheel', handleWheel);
+    };
+  }, [type]);
+
   return (
     <div className={className}>
       <div
@@ -36,7 +71,7 @@ function TextInput(
         )}
       >
         {icon && <span className={styles.icon}>{icon}</span>}
-        <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
+        <input type={type} {...rest} ref={innerRef} disabled={disabled} readOnly={readOnly} />
         {suffix &&
           cloneElement(suffix, {
             className: classNames([suffix.props.className, styles.suffix]),

packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx

@@ -68,7 +68,11 @@ function ApiResourceSettings() {
           </FormField>
           <FormField isRequired title="api_resource_details.token_expiration_time_in_seconds">
             <TextInput
-              {...register('accessTokenTtl', { required: true, valueAsNumber: true })}
+              {...register('accessTokenTtl', {
+                required: true,
+                valueAsNumber: true,
+              })}
+              type="number"
               hasError={Boolean(errors.accessTokenTtl)}
               placeholder={t('api_resource_details.token_expiration_time_in_seconds_placeholder')}
             />

packages/console/src/pages/Connectors/components/ConfigForm/index.tsx

@@ -51,7 +51,10 @@ function ConfigForm({ formItems }: Props) {
     const errorMessage = errors[item.key]?.message;
 
     const buildCommonProperties = () => ({
-      ...register(item.key, { required: item.required }),
+      ...register(item.key, {
+        required: item.required,
+        valueAsNumber: item.type === ConnectorConfigFormItemType.Number,
+      }),
       placeholder: item.placeholder,
       hasError,
     });