mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	Merge pull request #517 from Unleash/fix/search-field
fix: clear search input on route change
This commit is contained in:
		
						commit
						707b91e173
					
				@ -7,13 +7,13 @@ import SearchIcon from '@material-ui/icons/Search';
 | 
			
		||||
 | 
			
		||||
import { useStyles } from './styles';
 | 
			
		||||
 | 
			
		||||
function SearchField({ value = '', updateValue, className }) {
 | 
			
		||||
function SearchField({ updateValue, className }) {
 | 
			
		||||
    const styles = useStyles();
 | 
			
		||||
 | 
			
		||||
    const [localValue, setLocalValue] = useState(value);
 | 
			
		||||
    const [localValue, setLocalValue] = useState('');
 | 
			
		||||
    const debounceUpdateValue = debounce(updateValue, 500);
 | 
			
		||||
 | 
			
		||||
    const handleCange = e => {
 | 
			
		||||
    const handleChange = e => {
 | 
			
		||||
        e.preventDefault();
 | 
			
		||||
        const v = e.target.value || '';
 | 
			
		||||
        setLocalValue(v);
 | 
			
		||||
@ -42,7 +42,7 @@ function SearchField({ value = '', updateValue, className }) {
 | 
			
		||||
                    }}
 | 
			
		||||
                    inputProps={{ 'aria-label': 'search' }}
 | 
			
		||||
                    value={localValue}
 | 
			
		||||
                    onChange={handleCange}
 | 
			
		||||
                    onChange={handleChange}
 | 
			
		||||
                    onBlur={updateNow}
 | 
			
		||||
                    onKeyPress={handleKeyPress}
 | 
			
		||||
                />
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import { useContext, useLayoutEffect } from 'react';
 | 
			
		||||
import { useContext, useLayoutEffect, useEffect } from 'react';
 | 
			
		||||
import PropTypes from 'prop-types';
 | 
			
		||||
import classnames from 'classnames';
 | 
			
		||||
import { Link } from 'react-router-dom';
 | 
			
		||||
@ -46,6 +46,11 @@ const FeatureToggleList = ({
 | 
			
		||||
        fetcher();
 | 
			
		||||
    }, [fetcher]);
 | 
			
		||||
 | 
			
		||||
    useEffect(() => {
 | 
			
		||||
        updateSetting('filter', '');
 | 
			
		||||
        /* eslint-disable-next-line */
 | 
			
		||||
    }, []);
 | 
			
		||||
 | 
			
		||||
    const toggleMetrics = () => {
 | 
			
		||||
        updateSetting('showLastHour', !settings.showLastHour);
 | 
			
		||||
    };
 | 
			
		||||
@ -74,7 +79,6 @@ const FeatureToggleList = ({
 | 
			
		||||
                    hasAccess={hasAccess}
 | 
			
		||||
                    className={'skeleton'}
 | 
			
		||||
                    flags={flags}
 | 
			
		||||
                    archive={archive}
 | 
			
		||||
                />
 | 
			
		||||
            ));
 | 
			
		||||
        }
 | 
			
		||||
@ -125,7 +129,6 @@ const FeatureToggleList = ({
 | 
			
		||||
        <div className={styles.featureContainer}>
 | 
			
		||||
            <div className={styles.searchBarContainer}>
 | 
			
		||||
                <SearchField
 | 
			
		||||
                    value={settings.filter}
 | 
			
		||||
                    updateValue={updateSetting.bind(this, 'filter')}
 | 
			
		||||
                    className={classnames(styles.searchBar, {
 | 
			
		||||
                        skeleton: loading,
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user