the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2024-11-10 17:13:38 +08:00
Code Issues Projects Releases Packages Wiki Activity

Workaround for Firefox issue #368 and #513

Browse source
This commit is contained in:
the-djmaze 2022-09-12 23:30:14 +02:00
parent aa90583116
commit d18f93d87f
1 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
dev/Component/EmailAddresses.js
View file

@ -17,6 +17,8 @@ export class EmailAddressesComponent {
}
const self = this,
input = createElement('input',{type:"text", list:datalist.id,
autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"}),
// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
// In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set
validDropzone = () => dragAddress?.li.parentNode !== self.ul,
@ -55,13 +57,12 @@ export class EmailAddressesComponent {
}
});
self.input = createElement('input',{type:"text", list:datalist.id,
autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"});
self.input = input;
addEventsListeners(self.input, {
addEventsListeners(input, {
focus: () => {
self._focusTrigger(true);
self.input.value || self._resetDatalist();
input.value || self._resetDatalist();
},
blur: () => {
// prevent autoComplete menu click from causing a false 'blur'
@ -71,8 +72,7 @@ export class EmailAddressesComponent {
keydown: e => {
if ('Backspace' === e.key || 'ArrowLeft' === e.key) {
// if our input contains no value and backspace has been pressed, select the last tag
var lastTag = self.inputCont.previousElementSibling,
input = self.input;
var lastTag = self.inputCont.previousElementSibling;
if (lastTag && (!input.value
|| (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0))
) {
@ -93,11 +93,11 @@ export class EmailAddressesComponent {
// define starting placeholder
if (element.placeholder) {
self.input.placeholder = element.placeholder;
input.placeholder = element.placeholder;
}
self.inputCont = createElement('li',{class:"emailaddresses-input"});
self.inputCont.append(self.input);
self.inputCont.append(input);
self.ul.append(self.inputCont);
element.replaceWith(self.ul);
@ -109,14 +109,23 @@ export class EmailAddressesComponent {
self._updateDatalist = self.options.autoCompleteSource
? (() => {
let value = self.input.value.trim();
let value = input.value.trim();
if (datalist.inputValue !== value) {
datalist.inputValue = value;
value.length && self.options.autoCompleteSource(
value,
items => {
self._resetDatalist();
items?.forEach(item => datalist.append(new Option(item)));
let chars = value.length;
items?.forEach(item => {
datalist.append(new Option(item));
chars = Math.max(chars, item.length);
});
// https://github.com/the-djmaze/snappymail/issues/368 and #513
chars *= 8;
if (input.clientWidth < chars) {
input.style.width = chars + 'px';
}
}
)
}