chore(Field.String): add inputMode type (#3111)

dnbexperience · Dec 19, 2023 · 25d276c · 25d276c
1 parent d12850d
commit 25d276c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
@@ -17,6 +17,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `clear`                                 | `boolean`           | _(optional)_ True to have a clickable clear-icon for removing the active value.                                                                                     |
 | `autoresize`                            | `boolean`           | _(optional)_ For `multiline`, set true to expand when writing longer texts.                                                                                         |
 | `autoComplete`                          | `on` or `string`    | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).                                       |
+| `inputMode`                             | `string`            | _(optional)_ Define a [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).                                                   |
 | `autoresizeMaxRows`                     | `boolean`           | _(optional)_ For `multiline`, set how many rows of text can be shown at max.                                                                                        |
 | `characterCounter`                      | `boolean`           | _(optional)_ True to show a character counter.                                                                                                                      |
 | `minLength`                             | `boolean`           | _(optional)_ Validation for minimum length of the text (number of characters).                                                                                      |

diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts
@@ -61,7 +61,7 @@ describe('type definitions', () => {
       const content = fs.readFileSync(file, 'utf-8')
       expect(content).toContain('export interface InputProps')
       expect(content).toContain(
-        "extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,"
+        "extends Omit<React.HTMLProps<HTMLInputElement>, 'ref'>,"
       )
       expect(content).toContain('SpacingProps')
     }

diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts
@@ -30,7 +30,7 @@ export type InputSubmitButtonIcon =
   | ((...args: any[]) => any);
 export type InputChildren = React.ReactNode | ((...args: any[]) => any);
 export interface InputProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'ref'>,
     SpacingProps {
   /**
    * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.
@@ -195,7 +195,8 @@ export default class Input extends React.Component<InputProps, any> {
   static defaultProps: object;
   render(): JSX.Element;
 }
-export interface SubmitButtonProps extends React.HTMLProps<HTMLElement> {
+export interface SubmitButtonProps
+  extends React.HTMLProps<HTMLInputElement> {
   id?: string;
   /**
    * The content value of the input.

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx
@@ -30,6 +30,7 @@ export type Props = FieldHelpProps &
     clear?: boolean
     autoresize?: boolean
     autoComplete?: HTMLInputElement['autocomplete']
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']
     autoresizeMaxRows?: number
     characterCounter?: boolean
     mask?: InputMaskedProps['mask']
@@ -89,6 +90,7 @@ function StringComponent(props: Props) {
     name,
     className,
     autoComplete,
+    inputMode,
     innerRef,
     inputClassName,
     layout,
@@ -128,6 +130,7 @@ function StringComponent(props: Props) {
     id,
     name,
     autoComplete,
+    inputMode,
     className: cn,
     placeholder: placeholder,
     suffix: help ? (