[App Search] Result Settings: Max size input fixes (#104755)

* Fix "Max size" number inputs cutting off the "No limit" placeholder text on Chrome/webkit

- textOnly={false} is required for the input to expand in width

* Fix handleFieldNumberBlur behavior:
- should allow setting a number field back to empty/no limits

- dev note: '' is the blank/empty state, which gets parsed to NaN. Random invalid strings ALSO get parsed to '', which is NaN

* Fix input not clearing invalid non-number strings

For some really odd reason, '' and undefined aren't correctly resetting the input value when a string gets entered into the input. I had to add a space for EUI to actually start clearing it

Note that this change completely prevents users from writing non-numbers into the input at all, but this is probably fine/valid honestly

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/field_number.test.tsx

@@ -54,7 +54,7 @@ describe('FieldNumber', () => {
         }}
       />
     );
-    expect(wrapper.find(EuiFieldNumber).prop('value')).toEqual('');
+    expect(wrapper.find(EuiFieldNumber).prop('value')).toEqual(' ');
   });
 
   it('is disabled if the [fieldEnabledProperty] in fieldSettings is false', () => {
@@ -90,10 +90,10 @@ describe('FieldNumber', () => {
     expect(props.updateAction).toHaveBeenCalledWith('foo', 21);
   });
 
-  it('will call updateAction on blur using the minimum possible value if the current value is something other than a number', () => {
+  it('will call clearAction on blur if the current value is something other than a number', () => {
     const wrapper = shallow(<FieldNumber {...props} />);
     wrapper.simulate('blur', { target: { value: '' } });
-    expect(props.updateAction).toHaveBeenCalledWith('foo', 20);
+    expect(props.clearAction).toHaveBeenCalledWith('foo');
   });
 
   it('will call updateAction on blur using the minimum possible value if the value is something lower than the minimum', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/field_number.tsx

@@ -43,11 +43,10 @@ const handleFieldNumberBlur = (
   clearAction: (fieldName: string) => void
 ) => {
   return (e: FocusEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
+    let fieldValue = parseInt(e.target.value, 10);
-    const fieldValue = Math.min(
+    if (!isNaN(fieldValue)) {
-      SIZE_FIELD_MAXIMUM,
+      fieldValue = Math.min(SIZE_FIELD_MAXIMUM, Math.max(SIZE_FIELD_MINIMUM, fieldValue));
-      Math.max(SIZE_FIELD_MINIMUM, isNaN(value) ? 0 : value)
+    }
-    );
     updateOrClearSizeForField(fieldName, fieldValue, updateAction, clearAction);
   };
 };
@@ -74,7 +73,7 @@ export const FieldNumber: React.FC<Props> = ({
       value={
         typeof fieldSettings[fieldSizeProperty] === 'number'
           ? (fieldSettings[fieldSizeProperty] as number)
-          : ''
+          : ' ' // Without the space, invalid non-numbers don't get cleared for some reason
       }
       placeholder={i18n.translate(
         'xpack.enterpriseSearch.appSearch.engine.resultSettings.numberFieldPlaceholder',

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx

@@ -56,7 +56,7 @@ export const TextFieldsBody: React.FC = () => {
               }}
             />
           </EuiTableRowCellCheckbox>
-          <EuiTableRowCell align="center">
+          <EuiTableRowCell align="center" textOnly={false}>
             <FieldNumber
               fieldName={fieldName}
               fieldEnabledProperty="raw"
@@ -95,7 +95,7 @@ export const TextFieldsBody: React.FC = () => {
               }}
             />
           </EuiTableRowCellCheckbox>
-          <EuiTableRowCell align="center">
+          <EuiTableRowCell align="center" textOnly={false}>
             <FieldNumber
               fieldName={fieldName}
               fieldEnabledProperty="snippet"

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx

@@ -30,7 +30,7 @@ export const TextFieldsHeader: React.FC = () => {
             { defaultMessage: 'Raw' }
           )}
         </EuiTableHeaderCell>
-        <EuiTableHeaderCell align="center">
+        <EuiTableHeaderCell align="center" width="115">
           {i18n.translate(
             'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
             { defaultMessage: 'Max size' }
@@ -48,7 +48,7 @@ export const TextFieldsHeader: React.FC = () => {
             { defaultMessage: 'Fallback' }
           )}
         </EuiTableHeaderCell>
-        <EuiTableHeaderCell align="center">
+        <EuiTableHeaderCell align="center" width="115">
           {i18n.translate(
             'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
             { defaultMessage: 'Max size' }