[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
This commit is contained in:
parent
db048c33a5
commit
07bd76c2a3
4 changed files with 12 additions and 13 deletions
|
@ -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', () => {
|
it('is disabled if the [fieldEnabledProperty] in fieldSettings is false', () => {
|
||||||
|
@ -90,10 +90,10 @@ describe('FieldNumber', () => {
|
||||||
expect(props.updateAction).toHaveBeenCalledWith('foo', 21);
|
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} />);
|
const wrapper = shallow(<FieldNumber {...props} />);
|
||||||
wrapper.simulate('blur', { target: { value: '' } });
|
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', () => {
|
it('will call updateAction on blur using the minimum possible value if the value is something lower than the minimum', () => {
|
||||||
|
|
|
@ -43,11 +43,10 @@ const handleFieldNumberBlur = (
|
||||||
clearAction: (fieldName: string) => void
|
clearAction: (fieldName: string) => void
|
||||||
) => {
|
) => {
|
||||||
return (e: FocusEvent<HTMLInputElement>) => {
|
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);
|
updateOrClearSizeForField(fieldName, fieldValue, updateAction, clearAction);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -74,7 +73,7 @@ export const FieldNumber: React.FC<Props> = ({
|
||||||
value={
|
value={
|
||||||
typeof fieldSettings[fieldSizeProperty] === 'number'
|
typeof fieldSettings[fieldSizeProperty] === 'number'
|
||||||
? (fieldSettings[fieldSizeProperty] as number)
|
? (fieldSettings[fieldSizeProperty] as number)
|
||||||
: ''
|
: ' ' // Without the space, invalid non-numbers don't get cleared for some reason
|
||||||
}
|
}
|
||||||
placeholder={i18n.translate(
|
placeholder={i18n.translate(
|
||||||
'xpack.enterpriseSearch.appSearch.engine.resultSettings.numberFieldPlaceholder',
|
'xpack.enterpriseSearch.appSearch.engine.resultSettings.numberFieldPlaceholder',
|
||||||
|
|
|
@ -56,7 +56,7 @@ export const TextFieldsBody: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</EuiTableRowCellCheckbox>
|
</EuiTableRowCellCheckbox>
|
||||||
<EuiTableRowCell align="center">
|
<EuiTableRowCell align="center" textOnly={false}>
|
||||||
<FieldNumber
|
<FieldNumber
|
||||||
fieldName={fieldName}
|
fieldName={fieldName}
|
||||||
fieldEnabledProperty="raw"
|
fieldEnabledProperty="raw"
|
||||||
|
@ -95,7 +95,7 @@ export const TextFieldsBody: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</EuiTableRowCellCheckbox>
|
</EuiTableRowCellCheckbox>
|
||||||
<EuiTableRowCell align="center">
|
<EuiTableRowCell align="center" textOnly={false}>
|
||||||
<FieldNumber
|
<FieldNumber
|
||||||
fieldName={fieldName}
|
fieldName={fieldName}
|
||||||
fieldEnabledProperty="snippet"
|
fieldEnabledProperty="snippet"
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const TextFieldsHeader: React.FC = () => {
|
||||||
{ defaultMessage: 'Raw' }
|
{ defaultMessage: 'Raw' }
|
||||||
)}
|
)}
|
||||||
</EuiTableHeaderCell>
|
</EuiTableHeaderCell>
|
||||||
<EuiTableHeaderCell align="center">
|
<EuiTableHeaderCell align="center" width="115">
|
||||||
{i18n.translate(
|
{i18n.translate(
|
||||||
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
|
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
|
||||||
{ defaultMessage: 'Max size' }
|
{ defaultMessage: 'Max size' }
|
||||||
|
@ -48,7 +48,7 @@ export const TextFieldsHeader: React.FC = () => {
|
||||||
{ defaultMessage: 'Fallback' }
|
{ defaultMessage: 'Fallback' }
|
||||||
)}
|
)}
|
||||||
</EuiTableHeaderCell>
|
</EuiTableHeaderCell>
|
||||||
<EuiTableHeaderCell align="center">
|
<EuiTableHeaderCell align="center" width="115">
|
||||||
{i18n.translate(
|
{i18n.translate(
|
||||||
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
|
'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.maxSizeTitle',
|
||||||
{ defaultMessage: 'Max size' }
|
{ defaultMessage: 'Max size' }
|
||||||
|
|
Loading…
Reference in a new issue