diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx index 7596722829..bd9c09aed2 100644 --- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx @@ -18,6 +18,7 @@ import { Typography, useTheme, Autocomplete, + SelectChangeEvent, } from '@mui/material'; import { debounce } from 'debounce'; @@ -97,9 +98,9 @@ export const PlaygroundCodeFieldset: VFC = ({ (foundContext?.legalValues && foundContext.legalValues.length > 0) || contextField === 'currentTime' - ) - return; - setContextValue(''); + ) { + return setContextValue(''); + } } catch (error) { setToastData({ type: 'error', @@ -108,7 +109,7 @@ export const PlaygroundCodeFieldset: VFC = ({ } }; - const onAutoCompleteChange = ( + const changeContextValue = ( e: FormEvent, newValue: string | (string | string[])[] | null ) => { @@ -123,11 +124,11 @@ export const PlaygroundCodeFieldset: VFC = ({ setContextValue(newValue); }; - const resolveAutocompleteValue = (): string | string[] | undefined => { + const resolveAutocompleteValue = (): string | string[] | null => { //This is needed for clearing the Autocomplete Chips when changing the context field //and the new field also has legal values - if (contextValue === '') { - return undefined; + if (!contextValue || contextValue === '') { + return []; } if (isAdvancedPlayground) { @@ -188,9 +189,11 @@ export const PlaygroundCodeFieldset: VFC = ({ = ({ ); }; + const changeContextField = (event: SelectChangeEvent) => { + setContextField(event.target.value || ''); + + if (event.target.value === 'currentTime') { + return setContextValue(new Date().toISOString()); + } + + setContextValue(''); + }; + return ( @@ -236,16 +249,7 @@ export const PlaygroundCodeFieldset: VFC = ({ labelId="context-field-label" id="context-field" value={contextField} - onChange={event => { - setContextField(event.target.value || ''); - - if (event.target.value === 'currentTime') { - return setContextValue( - new Date().toISOString() - ); - } - setContextValue(''); - }} + onChange={changeContextField} variant="outlined" size="small" sx={{ width: 200, maxWidth: '100%' }}