Feat: Improve multiline input handling in popups (#4756) * feat: improve multiline input handling in popups - Added Ctrl+Enter requirement for submission in multiline input popups to prevent accidental sends - Exported PopupUtils class for external use * refactor: remove redundant higher/different rows from input popups - Removed rows: 2 from callGenericPopup calls where default behavior is sufficient - Increased rows from 2 to 4 in caption extension for better multiline input experience

81367629fe2d3d1baf3df71f2cf735ab0aa9ea6e

Wolfsblvt <wolfsblvt@gmail.com>

Signed

public/script.js+1 -1 Viewed

 async function doOnboarding(avatarId) {
     const template = $('#onboarding_template .onboarding');
     let userName = await callGenericPopup(template, POPUP_TYPE.INPUT, currentUser?.name || name1, { rows: 2, wider: true, cancelButton: false });
     if (userName) {
         userName = String(userName).replace('\n', ' ');

public/scripts/extensions/caption/index.js+1 -1 Viewed

     let prompt = externalPrompt || extension_settings.caption.prompt || PROMPT_DEFAULT;
     if (!externalPrompt && extension_settings.caption.prompt_ask) {
         const customPrompt = await callGenericPopup('Enter a comment or question:', POPUP_TYPE.INPUT, prompt, { rows: 24 });
         if (!customPrompt) {
             throw new Error('User aborted the caption sending.');
+        }

public/scripts/extensions/connection-manager/index.js+1 -2 Viewed

     });
     const isNameTaken = (n) => extension_settings.connectionManager.profiles.some(p => p.name === n);
     const suggestedName = getUniqueName(collapseSpaces(`${profile.api ?? ''} ${profile.model ?? ''} - ${profile.preset ?? ''}`), isNameTaken);
     let name = forceName ?? await callGenericPopup(template, POPUP_TYPE.INPUT, suggestedName, { rows: 2 });
     // If it's cancelled, it will be false
     if (!name) {
         return null;

         }, {});
         const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'edit', { name: profile.name, settings }));
         let newName = await callGenericPopup(template, POPUP_TYPE.INPUT, profile.name, {
 -            rows: 2,
             customButtons: [{
                 text: t`Save and Update`,
                 classes: ['popup-button-ok'],

public/scripts/popup.js+8 -1 Viewed

                     if (input instanceof HTMLInputElement && !shouldSendOnEnter())
                         return;
 +                    // If this is a multiline input popup, we should still not simply send on enter, that'd be weird.
 +                    // Let's still make it possible if CTRL is toggled though
 +                    if ((textarea instanceof HTMLTextAreaElement || input instanceof HTMLInputElement)
 +                        && !evt.ctrlKey && this.mainInput.rows > 1) {
 +                        return;
 +                    }
++
                     evt.preventDefault();
                     evt.stopPropagation();
                     const result = Number(document.activeElement.getAttribute('data-result') ?? this.defaultResult);

@@ -688,7 +695,7 @@ export class Popup {
688	695	};
689	696	}
690	697
691	698	export class PopupUtils {
692	699	/**
693	700	* Builds popup content with header and text below
694	701	*

public/scripts/scrapers.js+1 -1 Viewed

     async scrape() {
         let lang = '';
         const template = $(await renderExtensionTemplateAsync('attachments', 'youtube-scrape', {}));
         const videoUrl = await callGenericPopup(template, POPUP_TYPE.INPUT, '', { wide: false, large: false, okButton: 'Scrape', cancelButton: 'Cancel', rows: 2 });
         template.find('input[name="youtubeLanguageCode"]').on('input', function () {
             lang = String($(this).val()).trim();