When you press the search button with a limited text, nothing happens. It is necessary when clicking on the search so that it displays a window with an error

const SearchForm = () => {
    const [isSearchOpen, setSearchOpen] = useState(false),
        formRef = useRef(null);
    useClickOutside(formRef, () => setSearchOpen(false));
    const [inputText, setInputText] = useState("");
    const handleSubmit = e => {
        if (inputText.length >= 150 ) {
            e.preventDefault();
        }
    };
    return (
        <form  
            ref={formRef}
            className={cn("search-form", {
                "search-form--focus": isSearchOpen,
            })}
            onClick={() => setSearchOpen(true)}
            onKeyPress={() => setSearchOpen(true)}
            action="/search"
            // eslint-disable-next-line
            role="searchbox"
            onSubmit={handleSubmit}
        >
            <input
                value={inputText}
                onChange={e => setInputText(e.target.value)}
                className="search-form__input"
                name="filter"
                type="text"                
            />
            <button           
                className="search-form__button"
                type="submit"
                aria-label="Header search button"
            />
        </form>
    );
};

CodePudding user response：

A very simple solution is to show a warning message near the input box and validate it in your submit function

const SearchForm = () => {
    const [isSearchOpen, setSearchOpen] = useState(false),
        formRef = useRef(null);
    useClickOutside(formRef, () => setSearchOpen(false));
    const [inputText, setInputText] = useState("");
    const handleSubmit = e => {
        e.preventDefault();
        if(inputText.length <= 150) {
            //submit
        }
    };
    return (
        <form  
            ref={formRef}
            className={cn("search-form", {
                "search-form--focus": isSearchOpen,
            })}
            onClick={() => setSearchOpen(true)}
            onKeyPress={() => setSearchOpen(true)}
            action="/search"
            // eslint-disable-next-line
            role="searchbox"
            onSubmit={handleSubmit}
        >
            <input
                value={inputText}
                onChange={e => setInputText(e.target.value)}
                className="search-form__input"
                name="filter"
                type="text"                
            />
            {inputText.length > 150 ? <span style={{color:red}}>Sorry! Maximum length 150 </span> : ''}
            <button           
                className="search-form__button"
                type="submit"
                aria-label="Header search button"
            />
        </form>
    );
};

One another method is create a invalid variable state and on submit function if value is invalid then assign true to invalid variable then show message based on invalid value

CodePudding user response：

Could you just add code to your if statement? Like this:

if (inputText.length >= 150) {
    window.open("https://www.your-window.com");
    e.preventDefault();
}