diff --git a/src/widgets/FreeformInputWidget.tsx b/src/widgets/FreeformInputWidget.tsx index e40a8b3..6952076 100644 --- a/src/widgets/FreeformInputWidget.tsx +++ b/src/widgets/FreeformInputWidget.tsx @@ -13,7 +13,7 @@ import { Error } from './Widget' import { WidgetTooltip } from '..' -import { useReadLocalStorage } from 'usehooks-ts' +import { useEventListener, useReadLocalStorage } from 'usehooks-ts' interface FreeformInputWidgetDetailsCommon { comment?: string @@ -50,7 +50,7 @@ export interface FreeformInputWidgetConfiguration { details: FreeformInputWidgetDetails } -interface FreeformInputWidgetProps { +export interface FreeformInputWidgetProps { configuration: FreeformInputWidgetConfiguration /** * Whether the underlying fieldset should be functionally and visually disabled. @@ -73,6 +73,25 @@ const FreeformInputWidget = ({ }: FreeformInputWidgetProps) => { const [value, setValue] = useState() + /** + * Handle form Clear all + */ + const documentRef = useRef( + typeof window !== 'undefined' ? document : null + ) + + useEventListener( + 'formAction', + ev => { + if (!('detail' in ev)) return + if (!('type' in ev.detail)) return + if (ev.detail.type !== 'clearAll') return + + setValue('') + }, + documentRef + ) + const persistedSelection = useReadLocalStorage<{ dataset: { id: string } inputs: { [k: string]: string | number } @@ -128,7 +147,7 @@ const FreeformInputWidget = ({ const initialValue = value ?? defaultValue ?? '' return ( - + {label} -
+
) => { setValue(ev.target.value) }}