[#66899] increase height of pattern input field

app/components/work_package_types/pattern_input.html.erb

@@ -95,15 +95,17 @@ See COPYRIGHT and LICENSE files for more details.
           tag: :div,
           contenteditable: !disabled,
           disabled:,
-          border: true, border_radius: 2, p: 1,
+          border: true,
+          border_radius: 2,
+          p: 1,
           classes: "op-pattern-input--text-field FormControl-input",
           data: {
             action: "keydown->pattern-input#input_keydown
                    input->pattern-input#input_change
                    mouseup->pattern-input#input_mouseup
                    focus->pattern-input#input_focus
                    blur->pattern-input#input_blur",
-            "pattern-input-target": "content",
+            "pattern-input-target": "content"
           }
         )
       )

app/components/work_package_types/pattern_input.sass

@@ -1,13 +1,10 @@
+$pattern-input-height: calc(3*var(--control-medium-lineBoxHeight) + var(--control-medium-paddingInline-condensed))
+
 .op-pattern-input
   &--text-field
-    white-space: nowrap
+    white-space: pre-wrap
     overflow: hidden
-    height: var(--control-medium-size)
-
-    .-browser-firefox &
-      // Must be set to prevent Firefox from displaying the caret in incorrect places.
-      // See https://bugzilla.mozilla.org/show_bug.cgi?id=904846
-      white-space: pre-wrap
+    height: $pattern-input-height
 
     &:focus,
     &:focus-visible
@@ -17,7 +14,7 @@
 
   &--suggestions-dropdown
     position: absolute
-    top: var(--control-medium-size)
+    top: $pattern-input-height
     background: var(--body-background)
     z-index: 1
     width: 100%

frontend/src/stimulus/controllers/pattern-input.controller.ts

@@ -31,11 +31,11 @@
 import { Controller } from '@hotwired/stimulus';
 
 // internal type used to filter suggestions
-type FilteredSuggestions = Array<{
+type FilteredSuggestions = {
   key:string;
   label:string;
-  values:Array<{ prop:string; value:string; }>;
-}>;
+  values:{ prop:string; value:string; }[];
+}[];
 
 type TokenElement = HTMLElement&{ dataset:{ role:'token', prop:string } };
 type ListElement = HTMLElement&{ dataset:{ role:'list_item', prop:string } };
@@ -114,8 +114,12 @@ export default class PatternInputController extends Controller {
     }
 
     if (event.key === 'ArrowDown') {
-      const firstSuggestion = this.suggestionsTarget.querySelector('[role="menuitem"]') as HTMLElement;
-      firstSuggestion?.focus();
+      const firstSuggestion = this.suggestionsTarget.querySelector('[role="menuitem"]');
+      if (firstSuggestion === null) {
+        return;
+      }
+
+      (firstSuggestion as HTMLElement).focus();
       event.preventDefault();
     }
     if (event.key === 'ArrowLeft') {
@@ -140,8 +144,8 @@ export default class PatternInputController extends Controller {
 
   input_change():void {
     // clean up empty tags from the input
-    this.contentTarget.querySelectorAll('span').forEach((element) => element.textContent?.trim() === '' && element.remove());
-    this.contentTarget.querySelectorAll('br').forEach((element) => element.remove());
+    this.contentTarget.querySelectorAll('span').forEach((element) => { element.textContent?.trim() === '' && element.remove(); });
+    this.contentTarget.querySelectorAll('br').forEach((element) => { element.remove(); });
 
     // show suggestions for the current word
     const word = this.currentWord();
@@ -156,7 +160,7 @@ export default class PatternInputController extends Controller {
     // retain styling and adds an unwanted <font> tag,
     // breaking the behaviour of this component
     const selection = document.getSelection();
-    if (selection && selection.rangeCount) {
+    if (selection?.rangeCount) {
       const range = selection.getRangeAt(0);
       selection.removeAllRanges();
       selection.addRange(range);
@@ -169,7 +173,7 @@ export default class PatternInputController extends Controller {
 
   input_mouseup() {
     const selection = document.getSelection();
-    if (selection?.type === 'Caret' && selection?.anchorOffset === 0 && this.startsWithToken()) {
+    if (selection?.type === 'Caret' && selection.anchorOffset === 0 && this.startsWithToken()) {
       this.insertSpaceIfFirstCharacter();
     }
 
@@ -220,10 +224,10 @@ export default class PatternInputController extends Controller {
 
   private flatTokensKeyToLabelWithContext():Record<string, AttributeToken> {
     return Object.entries(this.suggestionsInitialValue)
-      .reduce((acc, [_, token_group]) => {
+      .reduce<Record<string, AttributeToken>>((acc, [_, token_group]) => {
         token_group.tokens.forEach((t) => { acc[t.key] = t; });
         return acc;
-      }, {} as Record<string, AttributeToken>);
+      }, {});
   }
 
   private updateFormInputValue():void {
@@ -242,7 +246,7 @@ export default class PatternInputController extends Controller {
 
   private insertSpaceIfFirstCharacter() {
     const selection = document.getSelection();
-    if (selection && selection.rangeCount) {
+    if (selection?.rangeCount) {
       const range = selection.getRangeAt(0);
       // create a test range
       // select the whole content of the input
@@ -264,7 +268,7 @@ export default class PatternInputController extends Controller {
 
   private insertSpaceIfLastCharacter():void {
     const selection = document.getSelection();
-    if (selection && selection.rangeCount) {
+    if (selection?.rangeCount) {
       const range = selection.getRangeAt(0);
       // create a test range
       // select the whole content of the input
@@ -273,7 +277,7 @@ export default class PatternInputController extends Controller {
       testRange.selectNodeContents(this.contentTarget);
       testRange.setStart(range.endContainer, range.endOffset);
 
-      // if the resulting range is empty it is at the end of the input
+      // if the resulting range is empty, it is at the end of the input
       if (testRange.toString() === '') {
         const afterToken = document.createTextNode(CONTROL_SPACE);
         this.contentTarget.appendChild(afterToken);
@@ -372,7 +376,7 @@ export default class PatternInputController extends Controller {
     const posKey = textContent.lastIndexOf(COMPLETION_CHARACTER);
     if (posKey === -1) { return null; }
 
-    // key character is only considered valid, if directly followed by a non-whitespace character
+    // The key character is only considered valid if directly followed by a non-whitespace character.
     const textAfterKey = textContent.slice(posKey + 1, selection.anchorOffset);
     return textAfterKey.startsWith(' ') ? null : textAfterKey;
   }
@@ -390,8 +394,9 @@ export default class PatternInputController extends Controller {
 
     // insert the HTML
     filtered.forEach((group, idx) => {
-      const groupHeader = this.suggestionsHeadingTemplateTarget.content?.cloneNode(true) as HTMLElement;
-      if (groupHeader) {
+      const groupHeader = this.suggestionsHeadingTemplateTarget.content.cloneNode(true);
+
+      if (this.isDocumentFragmentNode(groupHeader)) {
         const headerElement = groupHeader.querySelector('h2');
         if (headerElement) {
           headerElement.innerText = group.label;
@@ -401,16 +406,18 @@ export default class PatternInputController extends Controller {
       }
 
       group.values.forEach((suggestion) => {
-        const suggestionTemplate = this.suggestionsItemTemplateTarget.content?.cloneNode(true) as HTMLElement;
-        const suggestionItem = suggestionTemplate.firstElementChild as HTMLElement;
-        if (suggestionTemplate && suggestionItem) {
+        const suggestionTemplate = this.suggestionsItemTemplateTarget.content.cloneNode(true);
+        if (!this.isDocumentFragmentNode(suggestionTemplate)) { return; }
+
+        const suggestionItem = suggestionTemplate.firstElementChild;
+        if (this.isElement(suggestionItem)) {
           suggestionItem.dataset.prop = suggestion.prop;
           this.setSuggestionText(suggestionItem, suggestion.value);
           this.suggestionsTarget.appendChild(suggestionItem);
         }
       });
 
-      const groupDivider = this.suggestionsDividerTemplateTarget.content?.cloneNode(true) as HTMLElement;
+      const groupDivider = this.suggestionsDividerTemplateTarget.content.cloneNode(true) as HTMLElement;
       if (idx < filtered.length - 1) {
         this.suggestionsTarget.appendChild(groupDivider);
       }
@@ -461,7 +468,7 @@ export default class PatternInputController extends Controller {
       const group = this.suggestionsInitialValue[key];
       this.validSuggestions[key] = {
         title: group.title,
-        tokens: group.tokens.filter((token) => token.enabled)
+        tokens: group.tokens.filter((token) => token.enabled),
       };
     }
   }
@@ -500,7 +507,7 @@ export default class PatternInputController extends Controller {
   }
 
   private createToken(key:string):TokenElement {
-    const templateTarget = this.tokenTemplateTarget.content?.cloneNode(true) as DocumentFragment;
+    const templateTarget = this.tokenTemplateTarget.content.cloneNode(true) as DocumentFragment;
     const contentElement = templateTarget.firstElementChild as TokenElement;
     contentElement.dataset.prop = key;
     contentElement.innerText = this.tokenText(key);
@@ -511,7 +518,7 @@ export default class PatternInputController extends Controller {
     this.contentTarget.childNodes.forEach((node) => {
       if (this.isToken(node)) {
         const key = node.dataset.prop;
-        if(this.isSuggestable(key)) {
+        if (this.isSuggestable(key)) {
           this.setStyle(node, 'accent');
         } else {
           this.setStyle(node, 'danger');
@@ -544,6 +551,7 @@ export default class PatternInputController extends Controller {
   private tokenText(key:string):string {
     const token = this.validTokenMap[key];
 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!token) {
       return key;
     }
@@ -571,7 +579,7 @@ export default class PatternInputController extends Controller {
     while (match !== null) {
       const endOfMatch = match.index + match[0].length;
       if (endOfMatch < match.input.length && !this.isWhitespaceOrControlSpace(match.input[endOfMatch])) {
-        // add a control space when the token is not followed by a whitespace
+        // add a control space when the token is not followed by whitespace
         controlSpacesIndices.push(endOfMatch);
       }
 
@@ -589,7 +597,7 @@ export default class PatternInputController extends Controller {
     let result = '';
     this.contentTarget.childNodes.forEach((node:ChildNode) => {
       if (this.isText(node)) {
-        result += node.textContent;
+        result += node.textContent ?? '';
       } else if (this.isToken(node)) {
         result += `{{${node.dataset.prop}}}`;
       }
@@ -616,6 +624,10 @@ export default class PatternInputController extends Controller {
     return this.isElement(node) && node.dataset.role === 'list_item';
   }
 
+  private isDocumentFragmentNode(node:Node|null):node is DocumentFragment {
+    return node !== null && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+  }
+
   private isText(node:Node|null):node is Text {
     return node !== null && node.nodeType === Node.TEXT_NODE;
   }