import React, { useState } from 'react';
import "./styles/input.css";
import { CiSearch } from 'react-icons/ci';

interface SearchProps {
  isMobile: boolean;
  onSearch?: (query: string) => void;
}

const Search: React.FC<SearchProps> = ({ isMobile, onSearch = () => {} }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(searchQuery);
  };

  const handleFocus = (e) => {
    setIsFocused(true);
    console.log('Focused');
  };

  const handleBlur = () => {
    setIsFocused(false);
    console.log('Blurred');
  };

  const borderClass = isFocused ? 'border-b-2 border-main_theme' : 'border-b border-gray-300';
//   console.log('Applied class:', borderClass);

  return (
    <form onSubmit={handleSearchSubmit} className="relative w-[350px] lg:w-[500px]">
      <div className={`flex items-center`}>
        
        <input
          type="text"
          placeholder="Поиск"
          className="w-full p-2 border-none"
          value={searchQuery}
          onChange={handleSearchChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <button
          type="submit"
          className="p-2 text-gray-400 focus:outline-hidden"
        >
          <CiSearch className="h-5 w-5" />
        </button>
      </div>
      <hr className={`${borderClass}`} />
    </form>
  );
};

export default Search;

This is my code, the problem occurs with an input element, tried to style it both with Tailwind CSS, inline styles and additional css as in example, but none of variants helped(additional styling for it below) -

input.css

input {
    outline: none; 
    border: none;  
    box-shadow: none; 
}

input:focus {
    outline: none; 
    border-bottom: none;
}

For some reason after all corrections and additions I get this result when focused(screen). Meanwhile I need to completely remove an outline while focused

import React, { useState } from 'react';
import "./styles/input.css";
import { CiSearch } from 'react-icons/ci';

interface SearchProps {
  isMobile: boolean;
  onSearch?: (query: string) => void;
}

const Search: React.FC<SearchProps> = ({ isMobile, onSearch = () => {} }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(searchQuery);
  };

  const handleFocus = (e) => {
    setIsFocused(true);
    console.log('Focused');
  };

  const handleBlur = () => {
    setIsFocused(false);
    console.log('Blurred');
  };

  const borderClass = isFocused ? 'border-b-2 border-main_theme' : 'border-b border-gray-300';
//   console.log('Applied class:', borderClass);

  return (
    <form onSubmit={handleSearchSubmit} className="relative w-[350px] lg:w-[500px]">
      <div className={`flex items-center`}>
        
        <input
          type="text"
          placeholder="Поиск"
          className="w-full p-2 border-none"
          value={searchQuery}
          onChange={handleSearchChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <button
          type="submit"
          className="p-2 text-gray-400 focus:outline-hidden"
        >
          <CiSearch className="h-5 w-5" />
        </button>
      </div>
      <hr className={`${borderClass}`} />
    </form>
  );
};

export default Search;

This is my code, the problem occurs with an input element, tried to style it both with Tailwind CSS, inline styles and additional css as in example, but none of variants helped(additional styling for it below) -

input.css

input {
    outline: none; 
    border: none;  
    box-shadow: none; 
}

input:focus {
    outline: none; 
    border-bottom: none;
}

For some reason after all corrections and additions I get this result when focused(screen). Meanwhile I need to completely remove an outline while focused

• javascript
• html
• css
• reactjs

• Can't reproduce that appearance. Could be due to a browser extension – Phil Commented Mar 30 at 23:55
• Have you tried using !important? – Periplo Commented Mar 31 at 4:10
• Tried both in Opera and Edge, and everywhere I get this border. Upd: Tried "!important" now, it fixed the situaton at least in these both browsers. Thank you! –  bashlykov Commented Mar 31 at 8:04

1 Answer 1

input {
    outline: none !important; 
    border: none !important;  
    box-shadow: none !important; 
}

input:focus {
    outline: none !important; 
    border-bottom: none !important;
}

Such modification of module css file helped resolvnig the situation.