onCalciteSelectChange does not fire (React)

BaptisteDelaporte — Thu, 13 Mar 2025 00:06:48 GMT

Hi all,

I having some trouble using a calcite-select (v3.0.3) in a React app.

When I change a value, the onCalciteSelectChange event does not seem to fire at all. I tried to implement a component as simple as it could be in order to replicate this behavior and troubleshoot it but I cannot find anything that resolves it.

In what follows, the first component does not work as expected while changing the value whereas the second one is based on a classic html select to check if my react logic is right.

import React, { useState, useEffect, useContext, createContext } from 'react'; import { defineCustomElements } from '@esri/calcite-components/dist/loader'; function SelectCalcite(){ const [selectedValue, setSelectedValue] = useState('option1'); const handleSelectChange = (event) => { console.log(event.target.value) setSelectedValue(event.target.value); }; useEffect(() => { defineCustomElements(window); }, []); return ( <div> <calcite-select value={selectedValue} onCalciteSelectChange={handleSelectChange}> <calcite-option value="option1">Option 1</calcite-option> <calcite-option value="option2">Option 2</calcite-option> <calcite-option value="option3">Option 3</calcite-option> </calcite-select> <p>Selected value is : {selectedValue}</p> </div> ); } function Select(){ const [selectedValue, setSelectedValue] = useState('option1'); const handleSelectChange = (event) => { console.log(event.target.value) setSelectedValue(event.target.value); }; return ( <div> <select value={selectedValue} onChange={handleSelectChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <p>Selected value is : {selectedValue}</p> </div> ); }

I have also been told that we should use event.target.detail in the newest version of calcite but this might not be what causes this error.

Thank you in advance for your feedback,

Regards,

Baptiste

Re: onCalciteSelectChange does not fire (React)

BaptisteDelaporte — Thu, 13 Mar 2025 00:11:14 GMT

I found a way to overcome this issue, using the useRef hook as explained in the following documentation (Calcite Components React)

topic Re: onCalciteSelectChange does not fire (React) in Calcite Design System Questions

onCalciteSelectChange does not fire (React)

Re: onCalciteSelectChange does not fire (React)