Fix input text appearing on both sides in quick open

Bug: 403206050
Change-Id: Ie413092f4d7afa272c0f121029e3b9830da1984e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6426043
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

front_end/ui/components/text_prompt/TextPrompt.ts

@@ -119,6 +119,22 @@ export class TextPrompt extends HTMLElement {
     return this.#input().value || '';
   }
 
+  connectedCallback(): void {
+    const observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {
+          const writingDirection = this.#input().getAttribute('dir');
+          if (!writingDirection) {
+            this.#suggestion().removeAttribute('dir');
+            return;
+          }
+          this.#suggestion().setAttribute('dir', writingDirection);
+        }
+      }
+    });
+    observer.observe(this.#input(), {attributeFilter: ['dir']});
+  }
+
   #render(): void {
     const output = html`
       <style>${textPromptStyles.cssText}</style>