github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Observability] Make create annotations form keyboard navigable (#217918)

Browse source 
## Summary

Partially addresses #210531.

This doesn't fully fix the ticket linked, as elements that control the
annotation look in the second half of the form still trigger re-renders.
This means the focus will still be lost when those elements are
modified.

This is going to require significant refactoring of this form, but this
patch will at least make the elements reachable via tabbing.

The custom `onBlur` removed here doesn't seem to impact the form and the
rendering issues are prominent in any case.

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>
This commit is contained in:
Justin Kambic 2025-04-22 08:45:10 -04:00 • committed by GitHub
parent cbc153f928
commit cc18709d01
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 1 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
x-pack/solutions/observability/plugins/observability/public/components/annotations/annotation_form.tsx
View file

@ -18,7 +18,7 @@ import { AnnotationRange } from './components/annotation_range';
import { AnnotationAppearance } from './annotation_apearance';
export function AnnotationForm({ editAnnotation }: { editAnnotation?: Annotation | null }) {
const { control, formState, watch, trigger, unregister, setValue } =
const { control, formState, watch, unregister, setValue } =
useFormContext<CreateAnnotationForm>();
const timestampStart = watch('@timestamp');
@ -77,11 +77,6 @@ export function AnnotationForm({ editAnnotation }: { editAnnotation?: Annotation
isInvalid={fieldState.invalid}
compressed
data-test-subj="annotationTitle"
onBlur={() => {
field.onBlur();
// this is done to avoid too many re-renders, watch on name is expensive
trigger();
}}
/>
)}
/>
@ -106,11 +101,6 @@ export function AnnotationForm({ editAnnotation }: { editAnnotation?: Annotation
isInvalid={fieldState.invalid}
compressed
data-test-subj="annotationMessage"
onBlur={() => {
field.onBlur();
// this is done to avoid too many re-renders, watch on name is expensive
trigger();
}}
/>
)}
/>