[controls] fix Korean characters split into 2 characters with space in between when typing in options list search input (#213164)

Closes https://github.com/elastic/kibana/issues/213150

Test steps
* Follow https://www.youtube.com/watch?v=vjulSf3Kwu4 to setup duel
language inputs with English and Korean.
* Create a dashboard with an options list. Switch to Korean input and
type in option list control. Type the characters `d` and `k` on an
english keyboard.
* Ensure input treats value as a single character.
<img width="591" alt="Screenshot 2025-03-04 at 1 52 14 PM"
src="https://github.com/user-attachments/assets/c7cfe0f5-156d-4949-932a-96067bf20fd6"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2025-03-04 16:43:38 -07:00 committed by GitHub
parent c3c8f7befb
commit 3ce9019ce3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 3 deletions

View file

@ -102,6 +102,8 @@ export const useBatchedOptionalPublishingSubjects = <
* Batches the latest values of multiple publishing subjects into a single object. Use this to avoid unnecessary re-renders.
* Use when `subjects` are static and do not change over the lifetime of the component.
*
* Do not use when value is used as an input value to avoid debouncing user interactions
*
* @param subjects Publishing subjects array.
*/
export const useBatchedPublishingSubjects = <

View file

@ -18,7 +18,10 @@ import {
EuiText,
EuiToolTip,
} from '@elastic/eui';
import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
import {
useBatchedPublishingSubjects,
useStateFromPublishingSubject,
} from '@kbn/presentation-publishing';
import { getCompatibleSearchTechniques } from '../../../../../common/options_list/suggestions_searching';
import { useOptionsListContext } from '../options_list_context_provider';
@ -36,8 +39,11 @@ export const OptionsListPopoverActionBar = ({
}: OptionsListPopoverProps) => {
const { api, stateManager, displaySettings } = useOptionsListContext();
// Using useStateFromPublishingSubject instead of useBatchedPublishingSubjects
// to avoid debouncing input value
const searchString = useStateFromPublishingSubject(stateManager.searchString);
const [
searchString,
searchTechnique,
searchStringValid,
invalidSelections,
@ -45,7 +51,6 @@ export const OptionsListPopoverActionBar = ({
field,
allowExpensiveQueries,
] = useBatchedPublishingSubjects(
stateManager.searchString,
stateManager.searchTechnique,
stateManager.searchStringValid,
api.invalidSelections$,