Fixes clipped graph search messages

Author: d13

src/webviews/apps/shared/components/search/search-box.ts

@@ -1,6 +1,6 @@
 import type { TemplateResult } from 'lit';
 import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import type { Disposable } from 'vscode';
 import { isMac } from '@env/platform';
 import type { SearchQuery } from '../../../../../constants.search';
@@ -113,8 +113,15 @@ export class GlSearchBox extends GlElement {
 	@property({ type: String })
 	errorMessage = '';
 
+	@state() _value!: string;
 	@property({ type: String })
-	value = '';
+	get value() {
+		return this._value;
+	}
+	set value(value: string) {
+		if (this._value !== undefined) return;
+		this._value = value;
+	}
 
 	@property({ type: Boolean })
 	matchAll = false;
@@ -185,6 +192,10 @@ export class GlSearchBox extends GlElement {
 		this.searchInput?.logSearch(query);
 	}
 
+	setSearchQuery(query: string): void {
+		this._value = query;
+	}
+
 	private handleShortcutKeys(e: KeyboardEvent) {
 		if (e.altKey) return;
 
@@ -267,7 +278,7 @@ export class GlSearchBox extends GlElement {
 				.matchAll="${this.matchAll}"
 				.matchCase="${this.matchCase}"
 				.matchRegex="${this.matchRegex}"
-				.value="${this.value}"
+				.value="${this._value ?? ''}"
 				@gl-search-navigate="${(e: CustomEvent<SearchNavigationEventDetail>) => {
 					e.stopImmediatePropagation();
 					this.navigate(e.detail.direction);
@@ -309,6 +320,6 @@ export class GlSearchBox extends GlElement {
 					</button>
 				</gl-tooltip>
 			</div>
-			<progress-indicator active="${this.searching}"></progress-indicator>`;
+			<progress-indicator ?active="${this.searching}"></progress-indicator>`;
 	}
 }

src/webviews/apps/shared/components/search/search-input.ts

@@ -234,7 +234,16 @@ export class GlSearchInput extends GlElement {
 		return `${this.label} commits (↑↓ for history), e.g. "Updates dependencies" author:eamodio`;
 	}
 
-	@property({ type: String }) value = '';
+	@state() _value!: string;
+	@property({ type: String })
+	get value() {
+		return this._value;
+	}
+	set value(value: string) {
+		if (this._value !== undefined) return;
+		this._value = value;
+	}
+
 	@property({ type: Boolean }) filter = false;
 	@property({ type: Boolean }) matchAll = false;
 	@property({ type: Boolean }) matchCase = false;
@@ -254,7 +263,7 @@ export class GlSearchInput extends GlElement {
 
 	private handleClear(_e: Event) {
 		this.focus();
-		this.value = '';
+		this._value = '';
 		this.debouncedOnSearchChanged();
 	}
 
@@ -294,7 +303,7 @@ export class GlSearchInput extends GlElement {
 
 	private handleInput(e: InputEvent) {
 		const value = (e.target as HTMLInputElement)?.value;
-		this.value = value;
+		this._value = value;
 		this.updateHelpText();
 		this.debouncedOnSearchChanged();
 	}
@@ -390,6 +399,10 @@ export class GlSearchInput extends GlElement {
 		this.searchHistoryPos = this.searchHistory.length - 1;
 	}
 
+	setSearchQuery(query: string): void {
+		this._value = query;
+	}
+
 	override render(): unknown {
 		return html`<div class="field">
 				<div class="controls controls__start">
@@ -496,7 +509,7 @@ export class GlSearchInput extends GlElement {
 					type="text"
 					spellcheck="false"
 					placeholder="${this.placeholder}"
-					.value="${this.value}"
+					.value="${this._value ?? ''}"
 					aria-valid="${!this.errorMessage}"
 					aria-describedby="${this.errorMessage !== '' || this.helpType != null ? 'help-text' : ''}"
 					@input="${this.handleInput}"