javascript - preact を使用したaccessible-autocomplete が displayMenu='overlay' オプションを無視する理由

Question

私は非常に厄介な問題に直面しておりaccesible-autocomlete、有効な解決策を実際に見つけることができません。私が達成しようとしているのは、ここの例のように、オーバーレイに素敵なオートコンプリートを表示することです: https://alphagov.github.io/accessible-autocomplete/examples/ しかし、私のアプリはまだこのようにオートコンプリートを出力します: 私のインポート:

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')}の例のように書かれています. コンポーネントとコンポーネントから完全に外れましたが、役に立ちませんでした。足りないものはありますか？オーバーレイ モードで表示されないのはなぜですか?<Autocomplete ... />