fixes number input not correctly becoming a paragraph when textOnly i…

…s true
Altinn · Nov 5, 2024 · 311aa7d · 311aa7d
1 parent 8d16c2e
commit 311aa7d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 60 deletions.
diff --git a/src/app-components/Input/Input.module.css b/src/app-components/Input/Input.module.css
@@ -4,3 +4,16 @@ input[type='search'] {
   background-repeat: no-repeat;
   padding-right: calc(1.5rem + 10px * 2);
 }
+
+.text-padding {
+  padding: 0 var(--fds-spacing-2);
+  line-height: 32px;
+}
+
+.focusable:focus-visible {
+  --fds-focus-border-width: 3px;
+  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+  outline-offset: var(--fds-focus-border-width);
+  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+  border-radius: var(--fds-border_radius-medium);
+}
diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import { Textfield } from '@digdir/designsystemet-react';
+import { Paragraph, Textfield } from '@digdir/designsystemet-react';
 import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
 
+import classes from 'src/app-components/Input/Input.module.css';
 import type { InputType } from 'src/app-components/Input/constants';
 
-import 'src/app-components/Input/Input.module.css';
-
 export type InputProps = {
   size?: 'sm' | 'md' | 'lg';
   prefix?: string;
@@ -18,6 +17,7 @@ export type InputProps = {
   id?: string;
   readOnly?: boolean;
   type?: InputType;
+  textOnly?: boolean;
 } & Pick<
   InputHTMLAttributes<HTMLInputElement>,
   | 'value'
@@ -36,6 +36,24 @@ export type InputProps = {
 export function Input(props: InputProps) {
   const { size = 'sm', ...rest } = props;
 
+  if (props.textOnly) {
+    const { value, id, className } = props;
+    if (value === null || (typeof value === 'string' && value.length === 0)) {
+      return null;
+    }
+
+    return (
+      <Paragraph
+        id={id}
+        size='small'
+        className={`${classes.textPadding} ${classes.focusable} ${className}`}
+        tabIndex={0}
+      >
+        {value}
+      </Paragraph>
+    );
+  }
+
   return (
     <Textfield
       size={size}

diff --git a/src/layout/Input/InputComponent.module.css b/src/layout/Input/InputComponent.module.css
@@ -12,16 +12,3 @@
 .text-align-center input {
   text-align: center;
 }
-
-.text-padding {
-  padding: 0 var(--fds-spacing-2);
-  line-height: 32px;
-}
-
-.focusable:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  border-radius: var(--fds-border_radius-medium);
-}
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Paragraph } from '@digdir/designsystemet-react';
-
 import { FormattedInput } from 'src/app-components/Input/FormattedInput';
 import { Input } from 'src/app-components/Input/Input';
 import { NumericInput } from 'src/app-components/Input/NumericInput';
@@ -16,7 +14,6 @@ import classes from 'src/layout/Input/InputComponent.module.css';
 import { isNumberFormat, isPatternFormat } from 'src/layout/Input/number-format-helpers';
 import { useCharacterLimit } from 'src/utils/inputUtils';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import type { InputProps } from 'src/app-components/Input/Input';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type {
   NumberFormatProps as NumberFormatPropsCG,
@@ -56,37 +53,6 @@ function getVariantWithFormat(
   return { type: 'text' };
 }
 
-function InputOrParagraph(props: InputProps & { textOnly?: boolean }) {
-  const { size: _, textOnly, prefix, suffix, type, ...customProps } = props;
-
-  if (textOnly) {
-    const { value, id, className } = customProps;
-    if (value === null || (typeof value === 'string' && value.length === 0)) {
-      return null;
-    }
-
-    return (
-      <Paragraph
-        id={id}
-        size='small'
-        className={`${classes.textPadding} ${classes.focusable} ${className}`}
-        tabIndex={0}
-      >
-        {value}
-      </Paragraph>
-    );
-  }
-
-  return (
-    <Input
-      prefix={prefix}
-      suffix={suffix}
-      {...customProps}
-      type={type}
-    />
-  );
-}
-
 export type IInputProps = PropsFromGenericComponent<'Input'>;
 
 export const InputComponent: React.FunctionComponent<IInputProps> = ({ node, overrideDisplay }) => {
@@ -118,6 +84,8 @@ export const InputComponent: React.FunctionComponent<IInputProps> = ({ node, ove
 
   const characterLimit = useCharacterLimit(maxLength);
   const variant = getVariantWithFormat(inputVariant, reactNumberFormatConfig?.number);
+  const textOnly = overrideDisplay?.rowReadOnly && readOnly;
+  const className = formatting?.align ? classes[`text-align-${formatting.align}`] : '';
 
   return (
     <ComponentStructureWrapper
@@ -132,18 +100,18 @@ export const InputComponent: React.FunctionComponent<IInputProps> = ({ node, ove
       }}
     >
       {(variant.type === 'search' || variant.type === 'text') && (
-        <InputOrParagraph
+        <Input
           id={id}
           value={formValue}
           aria-label={ariaLabel}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
           autoComplete={autocomplete}
-          className={formatting?.align ? classes[`text-align-${formatting.align}`] : ''}
+          className={className}
           readOnly={readOnly}
+          textOnly={textOnly}
           required={required}
           onBlur={debounce}
           error={!isValid}
-          textOnly={overrideDisplay?.rowReadOnly && readOnly}
           prefix={prefixText}
           suffix={suffixText}
           type={variant.type}
@@ -161,11 +129,12 @@ export const InputComponent: React.FunctionComponent<IInputProps> = ({ node, ove
           aria-label={ariaLabel}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
           autoComplete={autocomplete}
-          className={formatting?.align ? classes[`text-align-${formatting.align}`] : ''}
+          className={className}
           readOnly={readOnly}
           required={required}
           onBlur={debounce}
           error={!isValid}
+          textOnly={textOnly}
           {...variant.format}
           onValueChange={(values, sourceInfo) => {
             if (sourceInfo.source === 'prop') {
@@ -184,8 +153,9 @@ export const InputComponent: React.FunctionComponent<IInputProps> = ({ node, ove
           aria-label={ariaLabel}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
           autoComplete={autocomplete}
-          className={formatting?.align ? classes[`text-align-${formatting.align}`] : ''}
+          className={className}
           readOnly={readOnly}
+          textOnly={textOnly}
           required={required}
           onBlur={debounce}
           error={!isValid}

diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts
@@ -50,11 +50,7 @@ describe('Grid component', () => {
       .eq(5)
       .findByRole('textbox', { name: /Prosentandel av gjeld i kredittkort/i })
       .type('5');
-    cy.get(appFrontend.grid.grid)
-      .find('tr')
-      .eq(6)
-      .findByRole('textbox', { name: /Utregnet totalprosent/i })
-      .should('have.value', '85 %');
+    cy.get(appFrontend.grid.grid).find('tr').eq(6).findByText('85 %');
     cy.get(appFrontend.grid.bolig.percentComponent).should('not.contain.text', 'Prosentandel av gjeld i boliglån');
     cy.get(appFrontend.errorReport).should('not.exist');