topic SelectV2 component error when typing on component in Developer Q&A Forum

SelectV2 component error when typing on component

StephenLHChan — Tue, 05 Mar 2024 20:41:09 GMT

Hi,

I am trying to upgrade my Select component to SelectV2 component.

I am facing an issue that:

when I click on "Search..." and start typing, it is working fine
when I only click to see all options and then start typing without click on "Search...", the following error is shown:

Error: Failed to execute 'querySelector' on 'Element': '#51a9b590-7d6a-402c-84c6-2d435127657a' is not a valid selector. at onKeyDown (http://localhost:3000/ui/main.js:70380:18) at Select3._this.onKeyDown (http://localhost:3000/ui/main.js:68638:11) at HTMLUnknownElement.callCallback2 (http://localhost:3000/ui/main.js:5639:24) at Object.invokeGuardedCallbackDev (http://localhost:3000/ui/main.js:5664:26) at invokeGuardedCallback (http://localhost:3000/ui/main.js:5698:41) at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/ui/main.js:5701:35) at executeDispatch (http://localhost:3000/ui/main.js:8483:13) at processDispatchQueueItemsInOrder (http://localhost:3000/ui/main.js:8503:17) at processDispatchQueue (http://localhost:3000/ui/main.js:8512:15) at dispatchEventsForPlugins (http://localhost:3000/ui/main.js:8520:13)

dependencies:

"@dynatrace/strato-components-preview": "0.111.3"

Re: SelectV2 component error when typing on component

sinisa_zubic — Wed, 06 Mar 2024 14:07:25 GMT

Hi @StephenLHChan

Unfortunately I can't reproduce the behavior with "@dynatrace/strato-components-preview": "0.111.3".

Maybe this issue only happens when certain props are being used? I have tried various combinations, but could not reproduce the behavior. Here my latest reproducer snippet

const result = useDqlQuery({ body: { query: `fetch dt.entity.process_group | dedup entity.name | fields name = entity.name, id`, requestTimeoutMilliseconds: 30000 } }); const [singleValue, setSingleValue] = useState<string | null>(null); return ( <Flex flexDirection="column" padding={32}> <FormField label="Select a country"> <SelectV2 value={singleValue} onChange={setSingleValue} > <SelectV2.Trigger width="550px" /> <SelectV2.Content > <SelectV2.EmptyState> No matching countries found. </SelectV2.EmptyState> <SelectV2.Filter /> { result.data && result.data.records.map((record) => ( <SelectV2.Option key={record!.id} value={record!.id}>{record!.name}</SelectV2.Option> )) } </SelectV2.Content> </SelectV2> </FormField>

Can you maybe share you snippet how you use the SelectV2 component or let us know which properties are being used?

Best,
Sini

Re: SelectV2 component error when typing on component

StephenLHChan — Wed, 06 Mar 2024 15:14:16 GMT

Hi @sinisa_zubic ,

Thanks for the reply. Here is the code snippet of the SelectV2 part.

<SelectV2 value={selectedIds} clearable multiple={multipleEntitySelection} disabled={ !env || !type || isLoading || entitySuggestions.length === 0 || disabled } onChange={(val) => { some OnChange Action }} > <SelectV2.Trigger placeholder={ isLoading ? 'Loading...' : entitySelectionPlaceholder } width="full" > <SelectV2.DisplayValue> <Flex> {selectedIds !== null && selectedIds.length > 0 ? ( typeof selectedIds === 'string' ? ( <Text>Selected 1 {type}</Text> ) : ( <Text> Selected {selectedIds.length} {type} </Text> ) ) : ( <Text>{entitySelectionPlaceholder}</Text> )} </Flex> </SelectV2.DisplayValue> </SelectV2.Trigger> <SelectV2.Content> <SelectV2.Filter /> {entitySuggestions ?.sort((a, b) => { if (selectedIds?.includes(a.entityId)) { return -1; } if (selectedIds?.includes(b.entityId)) { return 1; } if (a.displayName < b.displayName) { return -1; } else { return 1; } }) .map(({ entityId, displayName }) => { return ( <SelectV2.Option key={entityId as string} value={entityId as string} > {displayName} </SelectV2.Option> ); })} </SelectV2.Content> </SelectV2>

Re: SelectV2 component error when typing on component

sinisa_zubic — Thu, 07 Mar 2024 10:46:54 GMT

I am still not able to reproduce the issue but currently the SelectV2 component does not auto focus on the search. So when clicking on the Component and start typing, the filtering won't start. It is intended behavior that you have to do two clicks. You can try it also out here in the reference: https://developer.dynatrace.com/reference/design-system/preview/forms/SelectV2/#filter-options

I have also further checked with engineering and we will add the same behavior to SelectV2, so it won't be needed anymore that you make two clicks to start searching. But I can't give you any ETA on that.

I don't know if you have some other handlers in place which could trigger this error. Maybe you can create a reproducer (app) and share it with us?