Notes

const handleUnderwriterDropdown = (event, row) => {
const newVal = event.target.value;
if (newVal === row.underwriter_name) {
setEditingUnderwriter(null);
return;
}

setEditingUnderwriter(null);
const lob = row.lob?.toLowerCase() || "construction"; // fallback if needed

ApiService.updateUnderwriterSummary(
row.submission_id,
row.submission_version,
lob,
newVal
).then(() => {
applyRowEdit(row.submission_id, { underwriter_name: newVal });
}).catch(() => {
// Optionally rollback if needed
});
}; this is our underwriter dropdown

// ----- UNDERWRITER -----
if (key === "underwriter_name") {
if (locked) return renderLocked(replaceNameFN(e.underwriter_name, UnderwriterData));
if (editingUnderwriter === e.submission_id) {
return (
<td key={key} style={{ minWidth: col.minWidth }}>
<select
autoFocus
onBlur={() => setEditingUnderwriter(null)}
className="underwriter-dropdown"
value={e.underwriter_name} // this must match email
onClick={evt => evt.stopPropagation()}
onChange={evt => handleUnderwriterDropdown(evt, e)}
>
{UnderwriterData.map(u => (
<option key={u.email} value={u.email}>
{u.display_name || u.name}
</option>
))}
</select>
</td>
);
}
return (
<td key={key} style={{ minWidth: col.minWidth }}>
<span className="processor-cell">
<EditIcon
className="editIcon"
sx={{ width: 18 }}
onClick={evt => { evt.stopPropagation(); setEditingUnderwriter(e.submission_id); }}
/>
&nbsp;{replaceNameFN(e.underwriter_name, UnderwriterData)}
</span>
</td>
);
}
data is coming in the dropdown
now we want the same data needed to be coming in the search filter dropdown
import * as React from 'react';
import { useEffect } from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};

const variants = [
{
id: "account_name",
name: "Account Name",
value: ""
},

{
id: "genai_status",
name: 'AI Status',
value: ""
},
{
id: "docs_pending",
name: "Docs Pending",
value: ""
},
{
id: "processor",
name: "Processor",
value: ""
},
{
id: "broker",
name: 'Broker',
value: ""
},
{
id: "received_date",
name: 'Received Date',
value: ""
},
{
id: "underwriter_name",
name: 'Underwriter',
value: ""
},
{
id: "uw_status",
name: 'UW Status',
value: ""
},
{
id: "coverage",
name: 'Coverage',
value: ""
},
{
id: "id",
name: 'Application ID',
value: ""
},
{
id: "wns",
name: "WNS",
value: ""
}
];

export default function MultipleSelectDropDown(props) {

const [variantName, setVariantName] = React.useState([]);

const handleChange = async (event) => {
const {
target: { value },
} = event;

const unselect = [];
for (let index = 0; index < value.length; index++) {
let count = 0;
for (const element of value) {
if (value[index].id === element.id) {
count++
}
}
if (count != 1) {
unselect.push(index)
}
}

const filteredArray = value.filter((e, index) => !unselect.includes(index));

const preventDuplicate = filteredArray.filter((v, i, a) => a.findIndex((t) => t.id === v.id) === i);

setStateAsync(preventDuplicate)
props.getSearchInput(typeof preventDuplicate === 'string' ? preventDuplicate.split(',') : preventDuplicate)
};

const setStateAsync = (preventDuplicate) => {
setVariantName(
// On autofill we get a the stringified value.
typeof preventDuplicate === 'string' ? preventDuplicate.split(',') : preventDuplicate
);
}

useEffect(() => {
const value = props.searchColumn;
const preventDuplicate = value.filter((v, i, a) => a.findIndex((t) => t.id === v.id) === i);
setStateAsync(preventDuplicate)
}, [props.searchColumn]);

return (
<div className='dropdown-container'>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-checkbox-label">Search by column</InputLabel>
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={variantName}
onChange={handleChange}
input={<OutlinedInput label="Search by column" />}
renderValue={(selected) => selected.map((x) => x.name).join(', ')}
MenuProps={MenuProps}
>
{
[...variants] // Create a new array to avoid mutating the original
.sort((a, b) => a.name.localeCompare(b.name)) // Sort by name
.map(variant => (
<MenuItem key={variant.id} value={variant}>
<Checkbox
checked={
variantName.findIndex(item => item.id === variant.id) >= 0
}
/>
<ListItemText primary={variant.name} />
</MenuItem>
))
}
</Select>
</FormControl>
</div>
);
} this the serach filter dropdown