Material-UI-Search Bar value not clearing - reactjs

Question

I am using the #material-ui-searchbar to filter data. I'm using the same container for multiple different pages to display the info. When ever I switch between pages (and thus the data) the whole container reloads to display the new data and new {subType}... however, despite me changing the value of {searched} using setSearched("")(verified that it does in fact change from the debugger), the old search value from the previous page/state remains in the search bar even though the search is inactive. Why won't the search bar value update with the change of state? Doesn't make intuitive sense. Here is the code for my container:
import SearchBar from 'material-ui-search-bar';
const facilityGridConfig = {
hospitals: {
columns: [
{ name: 'name', title: 'Name' },
{ name: 'address1', title: 'Address' },
{ name: 'city', title: 'City' },
{ name: 'state', title: 'State' },
{ name: 'zipcode', title: 'Zip' },
{ name: 'phoneNumber', title: 'Phone' },
{ name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
{ name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
]
},
clinics: {
columns: [
{ name: 'name', title: 'Name' },
{ name: 'address1', title: 'Address' },
{ name: 'city', title: 'City' },
{ name: 'state', title: 'State' },
{ name: 'zipcode', title: 'Zip' },
{ name: 'phoneNumber', title: 'Phone' },
{ name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
{ name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
]
},
staff: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: 'facility', title: 'Facility' },
{ name: 'logins', title: 'Logins', width: 90 },
{ name: 'enrollmentStatus', title: 'Status', width: 90 },
{ name: 'email', title: 'Email' },
{ name: 'phoneNumber', title: 'Phone' }
]
},
therapists: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: 'facility', title: 'Facility' },
{ name: 'logins', title: 'Logins', width: 90 },
{ name: 'enrollmentStatus', title: 'Status', width: 90 },
{ name: 'email', title: 'Email' },
{ name: 'phoneNumber', title: 'Phone' },
{ name: 'endUserTotal', title: 'Patients' },
]
},
patients: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: 'facility', title: 'Facility' },
{ name: 'email', title: 'Email' },
{ name: "sessionsInPastWeek", title: "Sessions Last 7 Days"},
]
}
};
const facilityGridConfigSmall = {
hospitals: {
columns: [
{ name: 'name', title: 'Name' },
{ name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
{ name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
]
},
clinics: {
columns: [
{ name: 'name', title: 'Name' },
{ name: 'userTotal', title: 'Therapists', link: '/users/therapists' },
{ name: 'endUserTotal', title: 'Patients', link: '/users/patients' },
]
},
staff: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: 'logins', title: 'Logins' }
]
},
therapists: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: 'logins', title: 'Logins' },
{ name: 'endUserTotal', title: 'Patients' },
]
},
patients: {
columns: [
{ name: 'firstName', title: 'First Name' },
{ name: 'lastName', title: 'Last Name' },
{ name: "sessionsInPastWeek", title: "Sessions Last 7 Days"},
]
}
};
const useStyles = makeStyles((theme: Theme) => ({
root: {
position: 'relative',
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
height: '100%',
},
container: {
position: 'relative',
height: '100%',
},
breadcrumb: {
fontFamily: "Open Sans",
height: '28px',
},
content: {
position: 'relative',
height: 'calc(100% - 28px)',
},
gridHeaderEdit: {
textAlign: 'center!important' as any,
},
menuIcon: {
marginRight: theme.spacing(1)
},
}));
const FacilitiesGridContainer = (props: any) => {
const {
type,
subType,
uid,
} = props;
const mountedRef = useRef(true);
const classes = useStyles();
const dispatch = useDispatch();
const targetType = uid ? (
subType === Navigations.facilities.hospitals ? Navigations.facilities.clinics :
subType === Navigations.facilities.clinics ? Navigations.users.therapists : Navigations.users.patients
) : subType
const userProfile = useSelector(state => _get(state, ['user', 'profile']) || {}, shallowEqual);
const activeHospital = useSelector(state => _get(state, ['facilities', 'activeHospital']) || null, shallowEqual);
const activeClinic = useSelector(state => _get(state, ['facilities', 'activeClinic']) || null, shallowEqual);
const data = useSelector(state => _get(state, ['facilities', targetType]) || [], shallowEqual);
const loading = useSelector(state => _get(state, ['facilities', 'loading']) || false, shallowEqual);
const [fdata, setfData] = useState(data.data);
const [ openDeleteModal, setopenDeleteModal ] = useState(false);
const [ openInviteModal, setOpenInviteModal ] = useState(false);
const [ facilitiesInEdit, setFacilitiesInEdit ] = useState([] as any);
const [ sort, setSort ] = useState([] as any); //[{ field: 'name', dir: 'asc' }]
const [ visibleAddButton, setVisibleAddButton ] = useState(true);
const [ singleSubType, setSingleSubType ] = useState('');
const [ windowTitle, setWindowTitle ] = useState('');
const [ modalUserName, setModalUserName ] = useState('');
const [ visibleQRModal, setVisibleQRModal ] = useState(true);
const [ openQRModal, setOpenQRModal ] = useState(false);
const [ qrString, setQRString ] = useState('');
const [ qrFullName, setQRfullName ] = useState('');
const gridConfig = _get(facilityGridConfig, [targetType]) || {};
const gridConfigSmall = _get(facilityGridConfigSmall, [targetType]) || {};
const [searched, setSearched] = useState("");
const requestSearch = (searchedVal: string) => {
const filteredData = data.data.filter((row:any) => {
if (subType === "therapists" || subType === "patients" || subType === "staff"){
return (row['firstName'].toLowerCase().includes(searchedVal.toLowerCase()) || row['lastName'].toLowerCase().includes(searchedVal.toLowerCase()));
}
else {
return (row['name'].toLowerCase().includes(searchedVal.toLowerCase()));
}
});
setfData(filteredData);
};
const cancelSearch = () => {
setSearched("");
requestSearch(searched);
};
useEffect(() => {
setSearched("");
return () => {
mountedRef.current = false;
}
}, []);
useEffect(() => {setfData(data.data)}, [data.data] )
useEffect(() => {
setSearched("");
if (subType === Navigations.facilities.hospitals) {
if (uid) {
setSingleSubType('clinic');
} else {
setSingleSubType('hospital');
}
}
else if (subType === Navigations.facilities.clinics) {
if (uid) {
setSingleSubType('therapist');
} else {
setSingleSubType('clinic');
}
}
else if (subType === Navigations.users.therapists) {
if (uid) {
setSingleSubType('patient');
} else {
setSingleSubType('therapist');
}
}
else if (subType === Navigations.users.staff) {
setSingleSubType('staff');
}
else
setSingleSubType('patient');
return () => {
}
}, [subType, uid]);
useEffect(() => {
console.log('call to api here...')
dispatch({
type: FacilityActionType.GetFacilities,
payload: {
type: type,
subType: subType,
targetType: targetType,
facilityUid: targetType === 'therapists' ? (uid || null) : (_get(activeClinic, 'uid') || null),
parentFacilityUid: uid ? null : (_get(activeHospital, 'uid') || null),
parentUid: uid || null,
skip: 0,
take: 0
}
});
if (!userProfile)
setVisibleAddButton(false);
if (subType === 'hospitals') {
if ([UserRoles.SYSTEMADMIN].indexOf(userProfile.role) >= 0 && !!uid) {
setVisibleAddButton(true);
} else if ([UserRoles.SUPERUSER].indexOf(userProfile.role) < 0) {
setVisibleAddButton(false);
} else {
setVisibleAddButton(true);
}
}
else if (subType === 'clinics') {
if ([UserRoles.FACILITYADMIN].indexOf(userProfile.role) >= 0 && !!uid) {
setVisibleAddButton(true);
} else if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) < 0) {
setVisibleAddButton(false);
} else {
setVisibleAddButton(true);
}
} else if (subType === 'therapists') {
if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN].indexOf(userProfile.role) < 0) {
setVisibleAddButton(false);
} else {
setVisibleAddButton(true);
}
} else if (subType === 'patients') {
if ([UserRoles.SUPERUSER, UserRoles.SYSTEMADMIN, UserRoles.FACILITYADMIN, UserRoles.USER].indexOf(userProfile.role) < 0) {
setVisibleAddButton(false);
} else {
setVisibleAddButton(true);
}
}
setWindowTitle("Augment Therapy: "+subType.charAt(0).toUpperCase() + subType.slice(1));
setSearched("");
return () => {
};
}, [userProfile, subType, uid, dispatch, type, targetType, activeClinic, activeHospital])
useEffect(() => {
setSearched("");
if (data) {
if (subType === Navigations.users.therapists) {
for (let rec of data.data) {
if (!rec['enrollmentStatus']) {
rec.enrollmentStatus = '--'
}
}
}
}
}, [subType,data]);
const setActiveFacility = (dataItem: any) => {
const payload: any = getActiveFacilityPayload(subType, uid);
if (dataItem.facilityType === FacilityType.Hospital) {
payload.activeHospital = dataItem;
} else if (dataItem.facilityType === FacilityType.Clinic) {
payload.activeClinic = dataItem;
} else if (subType === 'clinics' && !!uid) {
payload.activeTherapist = dataItem;
} else if (subType === 'staff' && !uid) {
payload.activeStaff = dataItem;
} else if (subType === 'therapists' && !uid) {
payload.activeTherapist = dataItem;
} else {
payload.activePatient = dataItem;
}
dispatch({type: FacilityActionType.SetActiveFacility, payload: payload});
}
const handleRowClick = (e: any) => {
setActiveFacility(e.dataItem);
if (e.dataItem) {
if (e.dataItem.facilityType === FacilityType.Hospital) {
navigate(`${Navigations.facilities.root}/${Navigations.facilities.hospitals}/${e.dataItem.uid}`, false);
} else if (e.dataItem.facilityType === FacilityType.Clinic) {
navigate(`${Navigations.facilities.root}/${Navigations.facilities.clinics}/${e.dataItem.uid}`, false);
} else if (subType === 'clinics') {
if (!uid) {
navigate(`${Navigations.facilities.root}/${Navigations.facilities.clinics}/${_get(e.dataItem, 'uid')}`, false);
} else { // it's therapist
navigate(`${Navigations.users.root}/${Navigations.users.therapists}/${_get(e.dataItem, 'uid')}`, false);
}
} else if (subType === 'therapists') {
if (!uid) {
navigate(`${Navigations.users.root}/${Navigations.users.therapists}/${_get(e.dataItem, 'uid')}`, false);
} else { // it's therapist
navigate(`${Navigations.users.root}/${Navigations.users.patients}/${_get(e.dataItem, 'uid')}`, false);
}
} else if (subType === 'patients') {
navigate(`${Navigations.users.root}/${Navigations.users.patients}/${_get(e.dataItem, 'uid')}`, false);
}
}
}
const handleLink = (dataItem: any, fieldName: string) => {
setActiveFacility(dataItem);
if (fieldName === 'userTotal') {
navigate(`${Navigations.users.root}/${Navigations.users.therapists}`, false);
} else if (fieldName === 'endUserTotal') {
navigate(`${Navigations.users.root}/${Navigations.users.patients}`, false);
}
}
const handleEdit = (dataItem: any) => {
let newType = Navigations.facilities.root;
if (targetType === Navigations.users.staff || targetType === Navigations.users.therapists || targetType === Navigations.users.patients) {
newType = Navigations.users.root;
}
if (dataItem) {
setActiveFacility(dataItem);
navigate(`${newType}/${targetType}/edit`, false, {uid: dataItem.uid});
} else {
navigate(`${newType}/${targetType}/new`);
}
}
const handleDelete = (dataItem: any) => {
setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
setModalName(dataItem);
setopenDeleteModal(true);
}
const handleDeleteOk = () => {
dispatch({
type: FacilityActionType.DeleteFacilities,
payload: {
type: type,
subType: subType,
targetType: targetType,
body: facilitiesInEdit
}});
setopenDeleteModal(false);
}
const handleDeleteCancel = () => {
setFacilitiesInEdit([]);
setopenDeleteModal(false);
};
const handleInvite = (dataItem: any) => {
//setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
setFacilitiesInEdit([dataItem]);
setModalName(dataItem);
setOpenInviteModal(true);
};
const handleInviteOk = () => {
dispatch({
type: FacilityActionType.PostUserSendInvite,
payload: {
body: facilitiesInEdit,
},
});
setOpenInviteModal(false);
};
const handleInviteCancel = () => {
setFacilitiesInEdit([]);
setOpenInviteModal(false);
};
const setModalName = (dataItem: any) => {
if (dataItem.firstName) {
setModalUserName(dataItem.firstName+' '+dataItem.lastName);
} else {
setModalUserName(dataItem.name);
}
return () => {
}
}
const closeQR = () => {
setOpenQRModal( false );
};
const handleQR = (dataItem: any) => {
setFacilitiesInEdit([...facilitiesInEdit, dataItem]);
setQRString(dataItem.qr);
if (dataItem.lastName) {
setQRfullName( dataItem.firstName + ' ' + dataItem.lastName.charAt(0) + '.' );
} else {
setQRfullName( dataItem.firstName );
}
setOpenQRModal(true);
};
return (
<Page
className={classes.root}
title={windowTitle}
>
<Container
maxWidth={false}
className={classes.container}
>
<Grid
container
direction='row'
style={{height: '100%'}}
>
<Grid
item
xs={12}
className={classes.breadcrumb}
>
<FacilitiesBreadCrumb
type={type}
subType={subType}
/>
</Grid>
<Grid
item
xs={12}
className={classes.content}
>
{
loading && (
<CircularIndeterminate/>
)
}
<Grid item xs={12} >
<StatsCards
type={subType}
uid={uid}
/>
</Grid>
<Hidden mdDown>
<DataGrid
style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
data={orderBy(fdata, sort)}
sortable={{
mode: 'multiple',
}}
sort={sort}
onSortChange={(e) => {
setSort(e.sort);
}}
onRowClick={(e: any) => handleRowClick(e)}
>
{
(visibleAddButton) && (
<GridToolbar>
<Grid container
style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}>
<Grid item>
<SearchBar
value={searched}
onChange={(searchVal) => requestSearch(searchVal)}
onCancelSearch={() => cancelSearch()}
style={{
display: 'flex',
margin: '0 auto',
maxWidth: 800,
minWidth: 800,
paddingRight: 10
}}>
</SearchBar>
</Grid>
<Grid item>
<button
title="Add new"
className="k-button k-primary"
onClick={() => handleEdit(null)}
style={{
height: 50,
paddingLeft: 10
}}
>
Add New {singleSubType}
</button>
</Grid>
</Grid>
</GridToolbar>
)
}
{
(!(targetType==='hospitals' || targetType==='clinics')) && (
<GridColumn
title="Badge"
width="100"
headerClassName={classes.gridHeaderEdit}
cell={CellWithQR({userProfile: userProfile, type:"badge", handleAction: handleQR})}
/>
)
}
{
((targetType==='hospitals' || targetType==='clinics')) && (
<GridColumn
title=""
width="1"
headerClassName={classes.gridHeaderEdit}
cell={CellWithEdit({userProfile: userProfile, type:"empty", handleAction: handleInvite})}
/>
)
}
{
gridConfig.columns.map((c: any, index: number) => {
return (
<GridColumn key={`grid-${index}`}
field={c.name}
title={c.title}
cell={c.link ? CellWithLink({handleLink}) : undefined}
width= {c.width ? c.width : undefined}
/>
)
})
}
<GridColumn
title="Actions"
width="100"
headerClassName={classes.gridHeaderEdit}
cell={CellWithComboMenu({userProfile: userProfile, type:"edit", handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
/>
</DataGrid>
</Hidden>
<Hidden lgUp>
<DataGrid
style={{ height: '100%', overflow: 'auto', cursor:'pointer' }}
data={orderBy(fdata, sort)}
sortable={{
mode: 'multiple',
}}
sort={sort}
onSortChange={(e) => {
setSort(e.sort);
}}
onRowClick={(e: any) => handleRowClick(e)}
>
{
(visibleAddButton) && (
<GridToolbar>
<Grid container
style={{justifyContent: 'center', display: 'flex', alignItems: 'center', padding: 10}}>
<Grid item>
<SearchBar
value={searched}
onChange={(searchVal) => requestSearch(searchVal)}
onCancelSearch={() => cancelSearch()}
style={{
display: 'flex',
margin: '0 auto',
maxWidth: 800,
paddingRight: 10
}}>
</SearchBar>
</Grid>
<Grid item>
<button
title="Add new"
className="k-button k-primary"
onClick={() => handleEdit(null)}
style={{
height: 50,
paddingLeft: 10
}}
>
Add New {singleSubType}
</button>
</Grid>
</Grid>
</GridToolbar>
)
}
{
(!(targetType==='hospitals' || targetType==='clinics')) && (
<GridColumn
title="Badge"
width="20"
headerClassName={classes.gridHeaderEdit}
cell={CellWithQR({userProfile: userProfile, type:"badge", handleAction: handleQR})}
/>
)
}
{
((targetType==='hospitals' || targetType==='clinics')) && (
<GridColumn
title=""
width="10"
headerClassName={classes.gridHeaderEdit}
cell={CellWithEdit({userProfile: userProfile, type:"empty", handleAction: handleInvite})}
/>
)
}
{
gridConfigSmall.columns.map((c: any, index: number) => {
return (
<GridColumn key={`grid-${index}`}
field={c.name}
title={c.title}
cell={c.link ? CellWithLink({handleLink}) : undefined}
minResizableWidth = {c.name.toLowerCase().includes("name")? 20 : 10}
/>
)
})
}
<GridColumn
title="Actions"
width="100"
headerClassName={classes.gridHeaderEdit}
cell={CellWithComboMenu({userProfile: userProfile, type:"edit", handleActionInvite: handleInvite, handleActionEdit: handleEdit, handleActionDelete: handleDelete})}
/>
</DataGrid>
</Hidden>
<ConfirmModal
title="Confirm Deletion"
content={`Are you sure you want to delete the ${singleSubType} ( ${modalUserName} ) ?`}
open={openDeleteModal}
handleClose={handleDeleteCancel}
handleOk={handleDeleteOk}
handleCancel={handleDeleteCancel}
/>
<ConfirmModal
title="Confirm Invite"
content={`Send ${modalUserName} an invitation to connect?`}
open={openInviteModal}
handleClose={handleInviteCancel}
handleOk={handleInviteOk}
handleCancel={handleInviteCancel}
/>
{
(openQRModal) && (
<UserQRCode
id="qrCode"
qrCodeString={qrString}
size={256}
userfullname={qrFullName}
open={true}
handleClose={closeQR}
/>
)
}
</Grid>
</Grid>
</Container>
</Page>
);
}
export default FacilitiesGridContainer;```

Answer 1

Well, I'm new to reactjs, but I suggest to call setSearched in a useEffect hook if your filteredData get changed. So it'll be something like this :
useEffect(() => {
setSearched("");
}, [filteredData])
..despite me changing the value of {searched} using setSearched("")..
this because you call setSearched("") on compoenent mount using (useEffect) but you need this to be called every time your filteredData get updated