Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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, 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 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 // In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set
validDropzone = () => dragAddress?.li.parentNode !== self.ul, validDropzone = () => dragAddress?.li.parentNode !== self.ul,
@ -55,13 +57,12 @@ export class EmailAddressesComponent {
} }
}); });
self.input = createElement('input',{type:"text", list:datalist.id, self.input = input;
autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"});
addEventsListeners(self.input, { addEventsListeners(input, {
focus: () => { focus: () => {
self._focusTrigger(true); self._focusTrigger(true);
self.input.value || self._resetDatalist(); input.value || self._resetDatalist();
}, },
blur: () => { blur: () => {
// prevent autoComplete menu click from causing a false 'blur' // prevent autoComplete menu click from causing a false 'blur'
@ -71,8 +72,7 @@ export class EmailAddressesComponent {
keydown: e => { keydown: e => {
if ('Backspace' === e.key || 'ArrowLeft' === e.key) { if ('Backspace' === e.key || 'ArrowLeft' === e.key) {
// if our input contains no value and backspace has been pressed, select the last tag // if our input contains no value and backspace has been pressed, select the last tag
var lastTag = self.inputCont.previousElementSibling, var lastTag = self.inputCont.previousElementSibling;
input = self.input;
if (lastTag && (!input.value if (lastTag && (!input.value
|| (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0)) || (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0))
) { ) {
@ -93,11 +93,11 @@ export class EmailAddressesComponent {
// define starting placeholder // define starting placeholder
if (element.placeholder) { if (element.placeholder) {
self.input.placeholder = element.placeholder; input.placeholder = element.placeholder;
} }
self.inputCont = createElement('li',{class:"emailaddresses-input"}); self.inputCont = createElement('li',{class:"emailaddresses-input"});
self.inputCont.append(self.input); self.inputCont.append(input);
self.ul.append(self.inputCont); self.ul.append(self.inputCont);
element.replaceWith(self.ul); element.replaceWith(self.ul);
@ -109,14 +109,23 @@ export class EmailAddressesComponent {
self._updateDatalist = self.options.autoCompleteSource self._updateDatalist = self.options.autoCompleteSource
? (() => { ? (() => {
let value = self.input.value.trim(); let value = input.value.trim();
if (datalist.inputValue !== value) { if (datalist.inputValue !== value) {
datalist.inputValue = value; datalist.inputValue = value;
value.length && self.options.autoCompleteSource( value.length && self.options.autoCompleteSource(
value, value,
items => { items => {
self._resetDatalist(); 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';
}
} }
) )
} }