Почему доступное автозаполнение с помощью preact игнорирует параметр displayMenu = 'overlay' - PullRequest
Новая
       26

Почему доступное автозаполнение с помощью preact игнорирует параметр displayMenu = 'overlay'

0 голосов
/ 18 мая 2018

Я столкнулся с довольно раздражающей проблемой с accesible-autocomlete и не могу найти какое-либо правильное решение для меня.То, чего я пытаюсь добиться, это показать хорошее автозаполнение в оверлее, как в любом из приведенных здесь примеров: https://alphagov.github.io/accessible-autocomplete/examples/ Но мое приложение все еще печатает автозаполнение следующим образом: enter image description here Мой импорт:

import { h, Component } from 'preact';
import linkState from 'linkstate';
import axios from 'axios';
import Autocomplete from 'accessible-autocomplete/preact';

Мой метод компонента preact render() возвращает это: 

<form onSubmit={e => this.submitHandler(e)}>
    <div class="form-row mt-2">
        <div class="col-6 mb-2">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-secondary">From</span>
                </div>
                <input type="date" class="form-control" onInput={linkState(this, 'fromDate')} value={state.fromDate} />
                <input type="time" class="form-control" onInput={linkState(this, 'fromTime')} value={state.fromTime} />
            </div>
        </div>
        <div class="col-6 mb-2">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-secondary">To</span>
                </div>
                <input type="date" class="form-control" onInput={linkState(this, 'toDate')} value={state.toDate} />
                <input type="time" class="form-control" onInput={linkState(this, 'toTime')} value={state.toTime} />
            </div>
        </div>
    </div>
    <div class="form-row mt-2">
        <div class="col-4">
            <div class="form-check">
                <input id="errors-only" type="checkbox" class="form-check-input" onChange={linkState(this, 'errorsOnly')} value={state.errorsOnly} />
                <label for="errors-only" class="form-check-label">Errors only</label>
            </div>
        </div>
        <div class="col-8">
            <div class="input-group">
                <div class="input-group-prepend">
                    <select class="custom-select" onChange={linkState(this, 'supplementalKey')}>
                        <option></option>
                        <option value="acronym">Acronym</option>
                        <option value="document-id">Document number</option>
                        <option value="nip">NIP</option>
                    </select>
                </div>
                <div id="auto-container" role="combobox" aria-expanded="false">
                    <Autocomplete displayMenu='overlay'
                        id='autocomplete'
                        source={this.loadAutocomplete.bind(this)}/>
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-12 mb-2">
            <div class="input-group">
                <button type="submit" class="btn btn-secondary">Search</button>
            </div>
        </div>
    </div>
</form>

И вызов компонента автозаполнения, подобный этому 

<Autocomplete displayMenu='overlay'
    id='autocomplete'
    source={this.loadAutocomplete.bind(this)}/>

Я уже пробовал:добавив еще один параметр element={document.querySelector('#auto-container')} То, что я хотел попробовать, но точно не знаю, как его вписать, это код, написанный так же, как в примере в документации : enter image description hereЯ также пытался переместить его в другой более простой компонент и из компонента в целом, но безрезультатно.Я что-то упускаю?Почему мой <Autocomplete ... /> не отображается в режиме наложения?

1 Ответ

0 голосов
/ 18 мая 2018

Вы должны добавить стили по умолчанию для accessible-autocomplete:

Стилизация автозаполнения

Таблица стилей включена в пакет на dist/accessible-autocomplete.min.css

Вы можете скопировать еев папку стилей и импортируйте ее в браузер: 

<link rel="stylesheet" href="assets/css/accessible-autocomplete.min.css" />

Вы также можете импортировать ее с помощью Sass: 

@import "accessible-autocomplete";
...