fix: gradient/effect/audio palette pickers not showing items
Some checks failed
Lint & Test / test (push) Failing after 33s

Populate <select> <option> elements from gradient entities before
creating IconSelect — the trigger display needs matching options to
sync correctly. Add _syncSelectOptions helper used by all three
palette pickers (gradient, effect, audio).
This commit is contained in:
2026-03-24 14:14:04 +03:00
parent 524f910cf0
commit 40e951c882

View File

@@ -192,7 +192,7 @@ export function onCSSTypeChange() {
_ensureAudioPaletteIconSelect(); _ensureAudioPaletteIconSelect();
onAudioVizChange(); onAudioVizChange();
} }
if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); _renderCustomPresetList(); } if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); }
if (type === 'notification') { if (type === 'notification') {
ensureNotificationEffectIconSelect(); ensureNotificationEffectIconSelect();
ensureNotificationFilterModeIconSelect(); ensureNotificationFilterModeIconSelect();
@@ -399,6 +399,7 @@ function _ensureEffectPaletteIconSelect() {
const sel = document.getElementById('css-editor-effect-palette') as HTMLSelectElement | null; const sel = document.getElementById('css-editor-effect-palette') as HTMLSelectElement | null;
if (!sel) return; if (!sel) return;
const items = _buildGradientEntityItems(); const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; } if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 }); _effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
} }
@@ -433,6 +434,7 @@ function _ensureAudioPaletteIconSelect() {
const sel = document.getElementById('css-editor-audio-palette') as HTMLSelectElement | null; const sel = document.getElementById('css-editor-audio-palette') as HTMLSelectElement | null;
if (!sel) return; if (!sel) return;
const items = _buildGradientEntityItems(); const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; } if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 }); _audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
} }
@@ -456,10 +458,22 @@ function _buildGradientEntityItems() {
})); }));
} }
/** Sync <option> elements in a <select> from items array. */
function _syncSelectOptions(sel: HTMLSelectElement, items: Array<{ value: string; label: string }>) {
sel.innerHTML = '';
for (const item of items) {
const opt = document.createElement('option');
opt.value = item.value;
opt.textContent = item.label;
sel.appendChild(opt);
}
}
function _ensureGradientPresetIconSelect() { function _ensureGradientPresetIconSelect() {
const sel = document.getElementById('css-editor-gradient-preset') as HTMLSelectElement | null; const sel = document.getElementById('css-editor-gradient-preset') as HTMLSelectElement | null;
if (!sel) return; if (!sel) return;
const items = _buildGradientEntityItems(); const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; } if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 }); _gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
} }