css – How to focus with keyboard on autocomplete box with position absolute in React?


I can’t figure out how to make focus on autocomplete box. Could you help me with that?

At first I click on first input, then press tab and focus is on second input. Then I start typing and want to choose the needed option from an autocomplete box with tab, arrow up/down and enter…but when I press tab to focus on autocompelete the focus moves to the last field.enter image description here

Form.js layout

     <div className={styles.formWrapper}>
          <form className={styles.form} onSubmit={handleSubmit}>
            <label className={styles.inputLabel}>
              <input
                className={styles.input}
                placeholder="ФИО полностью"
                type="text"
                onChange={handleNameChange}
                value={name}
                onBlur={handleAcronym}
              />
              <span className={styles.error}>Ошибка</span>
            </label>
            <label className={styles.inputLabel}>
              <input
                className={styles.input}
                placeholder="Адрес"
                onChange={handleAdressChange}
                value={addressInput}
                onBlur={() => setTimeout(() => setSuggestions([]), 200)}
              />
              {suggestions.length > 0 && (
                <Suggestions suggestions={suggestions} onSuggestionClick={onSuggestionClick} />
              )}
              <span className={styles.error}>Здесь текст ошибки какой-то</span>
            </label>
    
            <label className={styles.inputLabel}>
              <input
                type="date"
                className={styles.input}
                min={minDate}
                max={maxDate}
                value={inputDate || minDate}
                onChange={handleDateChange}
              />
              <span className={styles.error}>Здесь текст ошибки какой-то</span>
            </label>
    
            <button type="submit" className={styles.button}>
              Вызвать врача
            </button>
          </form>
        </div>

CSS
.formWrapper {
  background-color: #f2f6fe;
  max-width: 600px;
  border-radius: 10px;
  margin: 0 auto;
}

.form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  padding: 30px 10px;
  margin: 0 auto;
}

.input {
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
}

.input:focus {
  background: lightyellow;
}

.inputLabel {
  display: flex;
  flex-direction: column;
  position: relative;
}

.inputDate {
  margin-bottom: 20px;
}

.error {
  font-size: 14px;
  padding: 10px 15px 0;
  margin-bottom: 20px;
  color: #ee3465;
}
.button {
  padding: 15px;
  border-radius: 10px;
  border: none;
  background-color: #5ec343;
  color: #fff;
  outline: none;
  cursor: pointer;
}

Autocomplete layout

    function Suggestions({ suggestions, onSuggestionClick }) {
    
      return (
        <ul className={styles.list}>
          {suggestions.map((item, idx) => (
            <li key={item.data.fias_id + idx} className={styles.listItem} onClick={() => onSuggestionClick(item)} tabindex='1'>
              {item.value}
            </li>
          ))}
        </ul>
      );
    }
    
    export default Suggestions;

CSS
.list {
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  width: 100%;
  top: 43px;
  left: 0;
  margin: 0;
  box-shadow: 0 5px 5px 5px #999;
  z-index: 1;
}

.listItem {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.listItem:focus {
  border: 2px solid red;
}

.listItem:hover {
  transition: background-color 0.3s linear;
  background: lightgreen;
}

.listItem:last-of-type:hover {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.listItem:last-of-type {
  border-bottom: none;
}



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here