[Security Solution][Event Filters] Fix autocomplete infinite loop bug when deleting the field combobox in event filters form (#189980)

## Summary
- [x] Fixes a bug where the user would not be able to clear out the
Field combo box in the Event Filters form
- [x] Adds a clear out button to the field combo box

Testing steps:
- Navigate to Security > Manage > Event Filters > Add event filter
- Fill out the Field and Value section and select out of the builder
- Try to clear out field either by backspacing the selection or with the
`x` button
- Successfully clear out the field 

# Screenshots

![infinitebug](https://github.com/user-attachments/assets/05c40764-ea93-4650-8273-7212d78889c2)

---------

Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>
Co-authored-by: Ashokaditya <ashokaditya@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Candace Park 2024-08-29 21:31:11 -04:00 committed by GitHub
parent e4eb55b9cb
commit d85069292c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 2 deletions

View file

@ -220,7 +220,7 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
exceptionItemIndex,
entry.entryIndex
)}
isClearable={false}
isClearable={true}
isLoading={false}
isDisabled={isDisabled || indexPattern == null}
onChange={handleFieldChange}

View file

@ -575,7 +575,10 @@ export const EventFiltersForm: React.FC<ArtifactFormComponentProps & { allowSele
tags: exception?.tags ?? [],
meta: exception.meta,
}
: exception;
: {
...exception,
entries: [{ field: '', operator: 'included', type: 'match', value: '' }],
};
const hasValidConditions =
arg.exceptionItems[0] !== undefined
? !(arg.errorExists && !arg.exceptionItems[0]?.entries?.length)