Fix glitchy UI dropdown select for max downloads and expiration

This commit is contained in:
Nick Sweeting 2021-05-19 00:35:53 -04:00 committed by GitHub
parent bcfb9c5d09
commit 46381fd516
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 16 deletions

View File

@ -1,32 +1,28 @@
const html = require('choo/html'); const html = require('choo/html');
module.exports = function(selected, options, translate, changed, htmlId) { module.exports = function(selected, options, translate, changed, htmlId) {
let x = selected; function choose(event) {
if (event.target.value != selected) {
console.log('Selected new value from dropdown', htmlId, ':', selected, '->', event.target.value)
changed(event.target.value);
}
}
return html` return html`
<select <select
id="${htmlId}" id="${htmlId}"
class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80" class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
data-selected="${selected}"
onchange="${choose}" onchange="${choose}"
> >
${options.map( ${options.map(
i => value =>
html` html`
<option value="${i}" ${i === selected ? 'selected' : ''} <option value="${value}" ${value == selected ? 'selected' : ''}>
>${translate(i)}</option ${translate(value)}
> </option>
` `
)} )}
</select> </select>
`; `;
function choose(event) {
const target = event.target;
const value = +target.value;
if (x !== value) {
x = value;
changed(value);
}
}
}; };