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';
 | 
					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}
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
 | 
				
			|||||||
@ -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,
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user