fix: Typing too fast in composer results in dropped characters

Composer/packages/adaptive-form/src/components/fields/ArrayField.tsx

@@ -3,7 +3,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useState } from 'react';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { SharedColors, NeutralColors, FontSizes } from '@uifabric/fluent-theme';
@@ -16,6 +15,7 @@ import { FieldLabel } from '../FieldLabel';
 import { arrayField } from './styles';
 import { ArrayFieldItem } from './ArrayFieldItem';
 import { UnsupportedField } from './UnsupportedField';
+import { TextField } from './TextField/TextField';
 
 const ArrayField: React.FC<FieldProps<unknown[]>> = (props) => {
   const {
@@ -82,12 +82,12 @@ const ArrayField: React.FC<FieldProps<unknown[]>> = (props) => {
           <TextField
             ariaLabel={formatMessage('New value')}
             data-testid="string-array-text-input"
+            defaultValue={newValue}
             iconProps={{
               iconName: 'ReturnKey',
               style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
             }}
             styles={{ root: { width: '100%' } }}
-            value={newValue}
             onChange={handleNewChange}
             onKeyDown={handleKeyDown}
           />

Composer/packages/adaptive-form/src/components/fields/EditableField.tsx

@@ -2,11 +2,13 @@
 // Licensed under the MIT License.
 
 import React, { useState, useEffect } from 'react';
-import { TextField, ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
+import { ITextFieldStyles } from 'office-ui-fabric-react/lib/TextField';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { mergeStyleSets } from '@uifabric/styling';
 import { FieldProps } from '@bfc/extension-client';
 
+import { TextField } from './TextField/TextField';
+
 interface EditableFieldProps extends Omit<FieldProps, 'definitions'> {
   fontSize?: string;
   styles?: Partial<ITextFieldStyles>;
@@ -67,6 +69,7 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
       <TextField
         ariaLabel={ariaLabel}
         autoComplete="off"
+        defaultValue={localValue}
         errorMessage={error as string}
         placeholder={placeholder || value}
         styles={
@@ -94,7 +97,6 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
             styles
           ) as Partial<ITextFieldStyles>
         }
-        value={localValue}
         onBlur={handleCommit}
         onChange={handleChange}
         onFocus={() => setHasFocus(true)}

Composer/packages/adaptive-form/src/components/fields/ExpressionField/ExpressionEditor.tsx

@@ -4,10 +4,10 @@
 import { FieldProps, useShellApi } from '@bfc/extension-client';
 import { IntellisenseTextField } from '@bfc/intellisense';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import React from 'react';
 
 import { getIntellisenseUrl } from '../../../utils/getIntellisenseUrl';
+import { TextField } from '../TextField/TextField';
 
 const ExpressionEditor: React.FC<FieldProps> = (props) => {
   const { id, value = '', onChange, disabled, placeholder, readonly, error } = props;
@@ -26,6 +26,7 @@ const ExpressionEditor: React.FC<FieldProps> = (props) => {
       {(textFieldValue, onValueChanged, onKeyDownTextField, onKeyUpTextField, onClickTextField) => (
         <TextField
           autoComplete="off"
+          defaultValue={textFieldValue}
           disabled={disabled}
           errorMessage={error}
           id={id}
@@ -35,7 +36,6 @@ const ExpressionEditor: React.FC<FieldProps> = (props) => {
             root: { width: '100%' },
             errorMessage: { display: 'none' },
           }}
-          value={textFieldValue}
           onChange={(_e, newValue) => onValueChanged(newValue || '')}
           onClick={onClickTextField}
           onKeyDown={onKeyDownTextField}

Composer/packages/adaptive-form/src/components/fields/IntellisenseField.tsx

@@ -3,12 +3,13 @@
 
 import { FieldProps, useShellApi } from '@bfc/extension-client';
 import { IntellisenseTextField } from '@bfc/intellisense';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import React from 'react';
 
 import { getIntellisenseUrl } from '../../utils/getIntellisenseUrl';
 import { FieldLabel } from '../FieldLabel';
 
+import { TextField } from './TextField/TextField';
+
 export const IntellisenseField: React.FC<FieldProps<string>> = function IntellisenseField(props) {
   const { id, value = '', onChange, label, description, uiOptions, required } = props;
 
@@ -29,8 +30,8 @@ export const IntellisenseField: React.FC<FieldProps<string>> = function Intellis
         {(textFieldValue, onValueChanged, onKeyDownTextField, onKeyUpTextField, onClickTextField) => (
           <TextField
             autoComplete="off"
+            defaultValue={textFieldValue}
             id={id}
-            value={textFieldValue}
             onChange={(_e, newValue) => onValueChanged(newValue || '')}
             onClick={onClickTextField}
             onKeyDown={onKeyDownTextField}

Composer/packages/adaptive-form/src/components/fields/ObjectArrayField.tsx

@@ -8,7 +8,7 @@ import { FieldProps, useShellApi } from '@bfc/extension-client';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { JSONSchema7 } from 'json-schema';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
+import { ITextField } from 'office-ui-fabric-react/lib/TextField';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
@@ -20,6 +20,7 @@ import { FieldLabel } from '../FieldLabel';
 import { objectArrayField } from './styles';
 import { ArrayFieldItem } from './ArrayFieldItem';
 import { UnsupportedField } from './UnsupportedField';
+import { TextField } from './TextField/TextField';
 
 const getNewPlaceholder = (props: FieldProps<any[]>, propertyName: string): string | undefined => {
   const { uiOptions } = props;
@@ -156,6 +157,7 @@ const ObjectArrayField: React.FC<FieldProps<any[]>> = (props) => {
                           ariaLabel={lastField ? END_OF_ROW_LABEL : INSIDE_ROW_LABEL}
                           autoComplete="off"
                           componentRef={index === 0 ? firstNewFieldRef : undefined}
+                          defaultValue={newObject[property] || ''}
                           iconProps={{
                             ...(lastField
                               ? {
@@ -169,7 +171,6 @@ const ObjectArrayField: React.FC<FieldProps<any[]>> = (props) => {
                           }}
                           placeholder={getNewPlaceholder(props, property)}
                           styles={{ field: { padding: '0 24px 0 8px' } }}
-                          value={newObject[property] || ''}
                           onChange={handleNewObjectChange(property)}
                           onKeyDown={handleKeyDown}
                         />

Composer/packages/adaptive-form/src/components/fields/OpenObjectField/OpenObjectField.tsx

@@ -6,13 +6,14 @@ import React, { useState, useRef } from 'react';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
+import { ITextField } from 'office-ui-fabric-react/lib/TextField';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { FieldProps } from '@bfc/extension-client';
 import formatMessage from 'format-message';
 
 import { FieldLabel } from '../../FieldLabel';
 import { getPropertyItemProps, useObjectItems } from '../../../utils/objectUtils';
+import { TextField } from '../TextField/TextField';
 
 import * as styles from './styles';
 import { ObjectItem } from './ObjectItem';
@@ -99,11 +100,11 @@ const OpenObjectField: React.FC<FieldProps<{
                 ariaLabel={keyLabel}
                 autoComplete="off"
                 componentRef={fieldRef}
+                defaultValue={name}
                 placeholder={formatMessage('Add a new key')}
                 styles={{
                   root: { margin: '7px 0 7px 0' },
                 }}
-                value={name}
                 onChange={(_, newValue) => setName(newValue || '')}
                 onKeyDown={handleKeyDown}
               />
@@ -112,6 +113,7 @@ const OpenObjectField: React.FC<FieldProps<{
               <TextField
                 ariaLabel={valueLabel}
                 autoComplete="off"
+                defaultValue={newValue}
                 iconProps={{
                   iconName: 'ReturnKey',
                   style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
@@ -120,7 +122,6 @@ const OpenObjectField: React.FC<FieldProps<{
                 styles={{
                   root: { margin: '7px 0 7px 0' },
                 }}
-                value={newValue}
                 onChange={(_, newValue) => setNewValue(newValue || '')}
                 onKeyDown={handleKeyDown}
               />

Composer/packages/adaptive-form/src/components/fields/StringField.tsx

@@ -4,11 +4,12 @@
 import React from 'react';
 import { FieldProps } from '@bfc/extension-client';
 import { NeutralColors } from '@uifabric/fluent-theme';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import formatMessage from 'format-message';
 
 import { FieldLabel } from '../FieldLabel';
 
+import { TextField } from './TextField/TextField';
+
 export const borderStyles = (transparentBorder: boolean, error: boolean) =>
   transparentBorder
     ? {
@@ -65,6 +66,7 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
       <TextField
         ariaLabel={label || formatMessage('string field')}
+        defaultValue={value}
         disabled={disabled}
         errorMessage={error}
         id={id}
@@ -75,7 +77,6 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
           root: { width: '100%' },
           errorMessage: { display: 'none' },
         }}
-        value={value}
         onBlur={handleBlur}
         onChange={handleChange}
         onFocus={handleFocus}