javascript - 如何在Materialize CSS中动态匹配选择输入到选择的选项？

Question

我正在使用 Materialize CSS 1.0.0(所以没有 jQuery)，我有一个选择下拉菜单，用户可以在其中选择不同的主题(自动、浅色、深色)。默认值为自动(它使用用户的系统偏好 - 亮或暗)。每个页面都有这个下拉菜单。一切正常，除非我打开站点并转到选择并选择，比如说，灯光，然后我导航到另一个页面，选择输入显示为自动。但是，下拉菜单选择了灯光(在 Materialize 中，所选元素具有灰色背景)，然后当我通过单击下拉菜单而不是单击灯光选项关闭下拉菜单时，输入显示灯光。
因此，重申一下，我选择了默认(自动)以外的主题，该选项在整个站点中被选中，但输入与整个站点中的选定选项不匹配直到我打开当前主题被选中的下拉菜单，然后在其外部单击，然后输入与所选内容匹配(例如，从自动更改为亮)。这很奇怪，因为除了输入最初与所选选项不匹配外，一切都在正常工作。我认为这是因为我的切换主题的 JS 与 Materialize 的选择“预设”之间存在某种冲突，后者依赖于 materialize.js 文件中自己的 JS。我只使用常规的 HTML 选择测试了切换主题的代码，并且效果很好。输入与整个站点中的选定选项匹配。
因此，它必须是 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);
    });
});

为选择物化 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文件中的输入。也许它们可以合并而不会丢失修复。我们可能永远不会知道。