Showing results for 
Show  only  | Search instead for 
Did you mean: 

SelectV2 component error when typing on component


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

I am facing an issue that:

  1. when I click on "Search..." and start typing, it is working fine
  2. 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)



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

Dynatrace Champion
Dynatrace Champion

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
        | fields name =, id`,
      requestTimeoutMilliseconds: 30000
  const [singleValue, setSingleValue] = useState<string | null>(null);

  return (
    <Flex flexDirection="column" padding={32}>
      <FormField label="Select a country">
          <SelectV2.Trigger width="550px" />
          <SelectV2.Content >
              No matching countries found.
            <SelectV2.Filter />
     && => (
                <SelectV2.Option key={record!.id} value={record!.id}>{record!.name}</SelectV2.Option>


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



Hi @sinisa_zubic ,

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

		!env ||
		!type ||
		isLoading ||
		entitySuggestions.length === 0 ||
	onChange={(val) => { some OnChange Action
			isLoading ? 'Loading...' : entitySelectionPlaceholder
				{selectedIds !== null && selectedIds.length > 0 ? (
					typeof selectedIds === 'string' ? (
						<Text>Selected 1 {type}</Text>
					) : (
							Selected {selectedIds.length} {type}
				) : (
		<SelectV2.Filter />
			?.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 (
						key={entityId as string}
						value={entityId as string}

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:


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?


Featured Posts