如何將 select 輸入動態匹配到 Materialise CSS 中的選定選項？

Question

我正在使用 Materialize CSS 1.0.0（所以沒有 jQuery），我有一個 select 下拉菜單，用戶可以在其中使用 Z99938282F04071859941E18,F16EFCF42Z 不同的主題（auto light） 默認值為自動（它使用用戶的系統偏好 - 亮或暗）。 每個頁面都有這個下拉菜單。 It all works as it should except if I open the site and go to the select and select, let's say, light, and then I navigate to another page, the select input says auto. 但是，下拉菜單選擇了燈光（在 Materialize 中，所選項目具有灰色背景），然后當我通過單擊下拉菜單而不是單擊燈光選項關閉下拉菜單時，輸入顯示燈光。

因此，重申一下，我 select 是默認（自動）以外的主題，該選項在整個站點中被選中，但輸入與整個站點中的選定選項不匹配直到我打開選擇當前主題的下拉菜單，然后在其外部單擊，然后輸入與所選內容匹配（例如，從自動更改為亮）。 這很奇怪，因為除了輸入最初與所選選項不匹配外，一切都在正常工作。 我認為這是因為我的切換主題的 JS 與 Materialize 的 select “預設”之間存在某種沖突，該預設依賴於 materialize.js 文件中自己的 JS。 我只使用常規的 HTML select 測試了我的代碼切換主題，它運行良好。 輸入與整個站點中的選定選項匹配。

因此，它必須是 materialize.js 以及該文件中發生的任何事情。 我嘗試查看該文件中的代碼以查看是否有任何可以更改的內容，但我真的無法在不破壞所有內容的情況下辨別需要更改的內容。

對於我的項目，這將構成一個煩人的小錯誤。

這是我的代碼：

HTML

<div class="input-field">
    <select name="theme" id="theme">
        <option value="auto">Auto</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
</div>

<script>
    const select = document.querySelector('select');
    M.FormSelect.init(select, {});
</script>

CSS

:root {
    --dark-background-color: black;
    --dark-color: white;
}

body {
    /* Light theme */
    --background-color: white;
    --color: black;

    background-color: var(--background-color);
    color: var(--color);
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --color: var(--dark-color);   
}

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --color: var(--dark-color);   
    }
}

.input-field input {
    color: var(--color);
}

JS

function applyTheme(theme) {
    document.body.classList.remove('theme-auto', 'theme-light', 'theme-dark');
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'auto';

    applyTheme(savedTheme);

    for (const optionElement of document.querySelectorAll('#theme option')) {
        optionElement.selected = savedTheme === optionElement.value;
    }

    document.querySelector('#theme').addEventListener('change', function() {
        localStorage.setItem('theme', this.value);
        applyTheme(this.value);
    });
});

為 Select 實現 JS：編輯：我想我已經將其縮小到有問題的代碼。

      /**
       * Handle Input Click
       */

    }, {
      key: "_handleInputClick",
      value: function _handleInputClick() {
        if (this.dropdown && this.dropdown.isOpen) {
          this._setValueToInput();
          this._setSelectedStates();
        }
      }

        // Add input dropdown
        this.input = document.createElement('input');
        $(this.input).addClass('select-dropdown dropdown-trigger');
        this.input.setAttribute('type', 'text');
        this.input.setAttribute('readonly', 'true');
        this.input.setAttribute('data-target', this.dropdownOptions.id);
        if (this.el.disabled) {
          $(this.input).prop('disabled', 'true');
        }

        this.$el.before(this.input);
        this._setValueToInput();

解決方案可能是不使用 Materialise。 我想我只是想知道是否有人更熟悉 Materialise 的底層機制（它的 JS）可以在這里發現一個修復。

這是實際問題的 GIF

Answer 1

將此添加到我的 JS 中。

// added
const themeSelect = document.getElementById('theme');

const savedTheme = localStorage.getItem('theme');
if (savedTheme) themeSelect.value = savedTheme;

themeSelect.addEventListener('change', function () {
    localStorage.setItem('theme', this.value);
});

奇怪的是，這個解決方案似乎是多余的。 問題中的原始JS（不是materialize.js）應該做同樣的事情，但它沒有做同樣的事情，然后添加它，它最終控制了materialize.js文件中的輸入。 也許它們可以合並而不會丟失修復。 我們可能永遠不會知道。