[rjsf-teamGH-2090] [fluent-ui] fix: Text inputs render with invalid a…

…ttribute (rjsf-team#2206) TextWidget generated `<input type="string" ... >` HTML which is invalid as per https://html.spec.whatwg.org/multipage/input.html#states-of-the-type-attribute `<input type="text" ... >` would be apropriate. The generation of invalid HTML results in undefined behaviour. I got on the trail of the issue, because [testing-library/user-event](https://github.com/testing-library/user-event#typeelement-text-options) acted in strange ways. This PR results in the generation of valid HTML and updates the tests. fix rjsf-team#2090
wegry · Jan 26, 2021 · 53ac2c2 · 53ac2c2
1 parent 6f3c4c7
commit 53ac2c2
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/packages/fluent-ui/src/TextWidget/TextWidget.tsx b/packages/fluent-ui/src/TextWidget/TextWidget.tsx
@@ -69,6 +69,8 @@ const TextWidget = ({
   }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
 
   const uiProps = _pick(options.props || {}, allowedProps);
+  const inputType = schema.type === 'string' ?  'text' : `${schema.type}`
+
   return (
     <TextField
       id={id}
@@ -78,7 +80,7 @@ const TextWidget = ({
       disabled={disabled}
       readOnly={readonly}
       name={name}
-      type={schema.type as string}
+      type={inputType as string}
       value={value ? value : ""}
       onChange={_onChange as any}
       onBlur={_onBlur}

diff --git a/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap
@@ -258,7 +258,7 @@ exports[`array fields fixed array 1`] = `
                       onInput={[Function]}
                       readOnly={false}
                       required={true}
-                      type="string"
+                      type="text"
                       value=""
                     />
                   </div>

diff --git a/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Form.test.tsx.snap
@@ -387,7 +387,7 @@ exports[`single fields string field regular 1`] = `
             onFocus={[Function]}
             onInput={[Function]}
             readOnly={false}
-            type="string"
+            type="text"
             value=""
           />
         </div>

diff --git a/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Object.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`object fields object 1`] = `
                   onInput={[Function]}
                   readOnly={false}
                   required={false}
-                  type="string"
+                  type="text"
                   value=""
                 />
               </div>