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

Question

我正在使用 Materialize CSS 1.0.0（所以没有 jQuery）并且我有一个选择下拉菜单，用户可以在其中选择不同的主题（自动、浅色、深色）。默认为自动（它使用用户的系统首选项 - 亮或暗）。每个页面都有这个下拉菜单。一切正常，除非我打开网站并转到选择并选择，比如说，点亮，然后导航到另一个页面，选择输入显示自动。但是，下拉菜单选择了灯光（在 Materialise 中，所选项目具有灰色背景），然后当我通过在下拉菜单外部单击而不是单击灯光选项来关闭下拉菜单时，输入显示为灯光。

因此，重申一下，我选择了默认（自动）以外的主题，在整个站点中选择了该选项，但输入与站点中的所选选项不匹配，直到我打开选择当前主题的下拉列表，然后单击它的外部，然后输入与所选内容匹配（例如，从自动更改为灯光）。这很奇怪，因为除了输入最初与所选选项不匹配之外，一切都在正常工作。我认为这是因为我的 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);
    });
});

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