1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

Merge pull request #517 from Unleash/fix/search-field

fix: clear search input on route change
This commit is contained in:
Youssef Khedher 2021-11-24 22:05:16 +01:00 committed by GitHub
commit 707b91e173
2 changed files with 10 additions and 7 deletions

View File

@ -7,13 +7,13 @@ import SearchIcon from '@material-ui/icons/Search';
import { useStyles } from './styles'; import { useStyles } from './styles';
function SearchField({ value = '', updateValue, className }) { function SearchField({ updateValue, className }) {
const styles = useStyles(); const styles = useStyles();
const [localValue, setLocalValue] = useState(value); const [localValue, setLocalValue] = useState('');
const debounceUpdateValue = debounce(updateValue, 500); const debounceUpdateValue = debounce(updateValue, 500);
const handleCange = e => { const handleChange = e => {
e.preventDefault(); e.preventDefault();
const v = e.target.value || ''; const v = e.target.value || '';
setLocalValue(v); setLocalValue(v);
@ -42,7 +42,7 @@ function SearchField({ value = '', updateValue, className }) {
}} }}
inputProps={{ 'aria-label': 'search' }} inputProps={{ 'aria-label': 'search' }}
value={localValue} value={localValue}
onChange={handleCange} onChange={handleChange}
onBlur={updateNow} onBlur={updateNow}
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
/> />

View File

@ -1,4 +1,4 @@
import { useContext, useLayoutEffect } from 'react'; import { useContext, useLayoutEffect, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -46,6 +46,11 @@ const FeatureToggleList = ({
fetcher(); fetcher();
}, [fetcher]); }, [fetcher]);
useEffect(() => {
updateSetting('filter', '');
/* eslint-disable-next-line */
}, []);
const toggleMetrics = () => { const toggleMetrics = () => {
updateSetting('showLastHour', !settings.showLastHour); updateSetting('showLastHour', !settings.showLastHour);
}; };
@ -74,7 +79,6 @@ const FeatureToggleList = ({
hasAccess={hasAccess} hasAccess={hasAccess}
className={'skeleton'} className={'skeleton'}
flags={flags} flags={flags}
archive={archive}
/> />
)); ));
} }
@ -125,7 +129,6 @@ const FeatureToggleList = ({
<div className={styles.featureContainer}> <div className={styles.featureContainer}>
<div className={styles.searchBarContainer}> <div className={styles.searchBarContainer}>
<SearchField <SearchField
value={settings.filter}
updateValue={updateSetting.bind(this, 'filter')} updateValue={updateSetting.bind(this, 'filter')}
className={classnames(styles.searchBar, { className={classnames(styles.searchBar, {
skeleton: loading, skeleton: loading,