Basically I have this Select box that I'm trying to validate the inputs going into it, they can't be shorter or longer than 7 characters, and all the characters have to be numbers, and the input box shouldn't let you put in a duplicate value.
This code is kinda messy but I've been going back and forth with deepseek trying to get it working, so apologies for the spaghetti code! I feel like it's a pretty simple thing to do, and I'm overthinking the solution.
These input filters are making sure that the inputs sent to the PID state are correct, including duplicate removal. The problem is that the select box shows the duplicate value even when filtered out via the multiple functions.
here's the input behavior I'm trying to avoid above. No matter what filters I put on the props, I can't get the duplicate values to display correctly, and I'm pretty stumped on how to fix it.
Thanks in advance for any help!
< Select
mode = "tags"
value = {
pid
}
onChange = {
(selectedPIDs) => {
// Convert all entries to strings first for consistent validation
console.log("SelectedPIDs:");
console.log(selectedPIDs);
const stringPIDs = selectedPIDs.map(pid => pid.toString());
// Filter valid (7-digit) and remove duplicates
const validUniquePIDs = [...new Set(
stringPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
)].map(Number); // Convert back to numbers
// Update both local and form state
console.log("validUniquePIDs:");
console.log(validUniquePIDs);
setPid(validUniquePIDs);
setCompany(prev => ({
...prev,
pid: validUniquePIDs
}));
}
}
onBlur = {
() => {
const stringPIDs = pid.map(pid => pid.toString());
const validatedPIDs = stringPIDs.filter(p => /^\d{7}$/.test(p.toString()));
// Filter valid (7-digit) and remove duplicates
const validUniquePIDs = [...new Set(
validatedPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
)].map(Number); // Convert back to numbers
setPid(validUniquePIDs);
setCompany({
...company,
pid: validUniquePIDs
});
}
}
disabled = {
isReadOnly
}
tokenSeparators = {
[]
}
onInputKeyDown = {
(e) => {
if (e.key === 'Enter') {
e.preventDefault();
// Manually trigger validation
const stringPIDs = pid.map(pid => pid.toString());
const validUniquePIDs = [...new Set(
stringPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
)].map(Number); // Convert back to numbers
setPid(validUniquePIDs);
setCompany({
...company,
pid: validUniquePIDs
});
}
}
}
allowClear
dropdownStyle = {
{
display: 'none'
}
}
notFoundContent = {
null
} // Hide dropdown entirely
/>
SelectedPIDs: company-details.jsx:1050 (2) [1234567, '1234567'] company-details.jsx:1059 validUniquePIDs: company-details.jsx:1060 [1234567]const [ company, setCompany ] = useState( {} ); const [ pid, setPid ] = useState( [] );the state is being set in theonChange,onBlur, andonInputKeyDownwithsetPid(validUniquePIDs); setCompany({ ...company, pid: validUniquePIDs });