Android task entry fix

This commit is contained in:
2026-03-29 11:27:43 -04:00
parent 2475204000
commit a60af7de31
2 changed files with 78 additions and 27 deletions

49
main.js

File diff suppressed because one or more lines are too long

View File

@ -25,6 +25,7 @@ export class TaskEditorModal extends Modal {
private selectedFile: TFile | null = null;
private fileLabel: HTMLSpanElement | null = null;
private keyboardHandler: (() => void) | null = null;
private keyboardResetHandler: (() => void) | null = null;
constructor(
app: App,
@ -46,20 +47,42 @@ export class TaskEditorModal extends Modal {
const { contentEl } = this;
contentEl.addClass('yaotp-editor-modal');
// On Android the on-screen keyboard shrinks the visual viewport but not
// the layout viewport, so a fixed-position modal stays centered in the
// full layout height and gets half-covered. We listen for visual-viewport
// resize events and pull the modal container's bottom edge up to match,
// keeping the modal in the visible area above the keyboard.
if (window.visualViewport) {
this.keyboardHandler = () => {
const vv = window.visualViewport!;
const keyboardHeight = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
this.containerEl.style.bottom = `${keyboardHeight}px`;
this.modalEl.style.maxHeight = keyboardHeight > 0 ? `${vv.height * 0.9}px` : '';
};
window.visualViewport.addEventListener('resize', this.keyboardHandler);
}
// On Android the on-screen keyboard doesn't resize the layout viewport, so
// the fixed-position modal container stays full-height and the modal ends
// up centered behind the keyboard. We fix this by:
// 1. On textarea focus (+ a short delay for the keyboard animation),
// read the visual viewport height and shrink the container to that
// size, then align the modal to the top of the container.
// 2. On blur, reset everything.
// We also listen to visualViewport and window resize as supplementary
// triggers in case the keyboard appears/disappears without a focus change.
const adjust = () => {
const vv = window.visualViewport;
const availableHeight = vv ? vv.height : window.innerHeight;
const keyboardHeight = Math.max(0, window.innerHeight - availableHeight);
if (keyboardHeight > 50) {
this.containerEl.style.height = `${availableHeight}px`;
this.containerEl.style.alignItems = 'flex-start';
this.containerEl.style.paddingTop = '8px';
this.modalEl.style.maxHeight = `${availableHeight - 16}px`;
} else {
this.containerEl.style.height = '';
this.containerEl.style.alignItems = '';
this.containerEl.style.paddingTop = '';
this.modalEl.style.maxHeight = '';
}
};
this.keyboardHandler = adjust;
this.keyboardResetHandler = () => {
this.containerEl.style.height = '';
this.containerEl.style.alignItems = '';
this.containerEl.style.paddingTop = '';
this.modalEl.style.maxHeight = '';
};
window.visualViewport?.addEventListener('resize', adjust);
window.addEventListener('resize', adjust);
// Title
contentEl.createEl('h2', { text: 'Edit task' });
@ -74,6 +97,8 @@ export class TaskEditorModal extends Modal {
attr: { rows: '8', placeholder: 'Task title\n\nNotes…' },
});
this.textarea.value = initialValue;
this.textarea.addEventListener('focus', () => setTimeout(adjust, 300));
this.textarea.addEventListener('blur', () => setTimeout(adjust, 100));
// Auto-focus
setTimeout(() => this.textarea?.focus(), 50);
@ -129,8 +154,11 @@ export class TaskEditorModal extends Modal {
onClose(): void {
if (this.keyboardHandler) {
window.visualViewport?.removeEventListener('resize', this.keyboardHandler);
window.removeEventListener('resize', this.keyboardHandler);
this.keyboardHandler = null;
}
this.keyboardResetHandler?.();
this.keyboardResetHandler = null;
this.contentEl.empty();
}