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
