Skip to content

Commit cfc1389

Browse files
ArathyKumarArathyKumar
committed
chore: submit button variant added
1 parent 40ec9df commit cfc1389

File tree

3 files changed

+122
-38
lines changed

3 files changed

+122
-38
lines changed

‎elements/pf-search-input/demo/pf-search-input-with-submit.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div class="container">
2+
<h1>Search with autocomplete</h1>
3+
<pf-search-input variant="advanced" id="search-input" placeholder="Search">
4+
<pf-button slot="submit" data-action="search"> Search</pf-button>
5+
<pf-option value="Alabama"> Alabama </pf-option>
6+
<pf-option value="New Jersey"> New Jersey </pf-option>
7+
<pf-option value="New York"> New York </pf-option>
8+
<pf-option value="New Mexico"> New Mexico </pf-option>
9+
<pf-option value="North Carolina"> North Carolina </pf-option>
10+
<pf-option value="Alabama1"> Alabama 1 </pf-option>
11+
<pf-option value="New Jersey1"> New Jersey 1 </pf-option>
12+
<pf-option value="New York1"> New York 1 </pf-option>
13+
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
14+
<pf-option value="North Carolina1"> North Carolina 1</pf-option>
15+
<pf-option value="Alabama2"> Alabama 2 </pf-option>
16+
<pf-option value="New Jersey2"> New Jersey 2 </pf-option>
17+
<pf-option value="New York2"> New York 2 </pf-option>
18+
<pf-option value="New Mexico2"> New Mexico 2 </pf-option>
19+
<pf-option value="North Carolina2"> North Carolina 2 </pf-option>
20+
<pf-option value="Alabama3"> Alabama 3 </pf-option>
21+
<pf-option value="New Jersey3"> New Jersey 3 </pf-option>
22+
<pf-option value="New York3"> New York 3 </pf-option>
23+
<pf-option value="New Mexico3"> New Mexico 3 </pf-option>
24+
<pf-option value="North Carolina3"> North Carolina 3 </pf-option>
25+
</pf-search-input>
26+
</div>
27+
28+
<script type="module">
29+
import '@patternfly/elements/pf-search-input/pf-search-input.js';
30+
31+
const searchInput = document.getElementById('search-input');
32+
33+
searchInput.addEventListener('change', (event) => {
34+
/* eslint-disable no-console */
35+
console.log('Selected:', event.target.value);
36+
/* eslint-disable no-console */
37+
});
38+
</script
39+
</script>
40+
41+
<style>
42+
.container{
43+
padding: 40px;
44+
}
45+
</style>

‎elements/pf-search-input/pf-search-input.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
display: flex;
158158
flex-direction: column;
159159
align-items: stretch;
160+
width: fit-content;
160161
}
161162

162163
:host([hidden]),
@@ -176,7 +177,6 @@
176177
position: relative;
177178
}
178179

179-
/* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */
180180
#listbox-container {
181181
display: inline-flex;
182182
position: absolute;
@@ -394,4 +394,17 @@ pf-text-input {
394394

395395
border: none;
396396
box-sizing: border-box;
397+
}
398+
399+
.search-input-container {
400+
display: flex;
401+
align-items: center;
402+
justify-content: flex-start;
403+
position: relative;
404+
}
405+
406+
.submit-button-container {
407+
position: absolute;
408+
top: 0;
409+
right: -100px;
397410
}

‎elements/pf-search-input/pf-search-input.ts‎

Lines changed: 63 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -172,47 +172,52 @@ export class PfSearchInput extends LitElement {
172172
const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
173173

174174
return html`
175-
<div
176-
id="outer"
177-
style="${styleMap(styles)}"
178-
class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
179-
>
180-
<div id="toggle">
181-
<div class="search-icon">
182-
<pf-icon size="md" icon="search" set="fas">search</pf-icon>
183-
</div>
184-
<input
185-
id="toggle-input"
186-
?disabled="${disabled}"
187-
@keydown=${this.#onSearchInput}
188-
placeholder="${placeholder}">
189-
<div class="close-button-container">
190-
<pf-button
191-
@click="${this.#OnClose}"
192-
?hidden="${this.#hideCloseButton()}"
193-
id="close-button"
194-
plain
195-
label="Close"
196-
>
197-
<pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
198-
</pf-button>
199-
</div>
200-
<button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
201-
</div>
175+
<div class="search-input-container" @click=${this.#onSubmit}
176+
@keydown=${this.#handleKeyDown}>
202177
<div
203-
204-
id="listbox-container"
205-
?hidden="${!expanded}"
206-
style="${styleMap({
207-
marginTop: `${height || 0}px`,
208-
width: width ? `${width}px` : 'auto',
209-
})}"
178+
id="outer"
179+
style="${styleMap(styles)}"
180+
class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
210181
>
211-
<div id="listbox">
212-
${this.#combobox.renderItemsToShadowRoot()}
213-
<slot ?hidden="${hideLightDomItems}"></slot>
182+
<div id="toggle">
183+
<div class="search-icon">
184+
<pf-icon size="md" icon="search" set="fas">search</pf-icon>
185+
</div>
186+
<input
187+
id="toggle-input"
188+
?disabled="${disabled}"
189+
@keydown=${this.#onSearchInput}
190+
placeholder="${placeholder}">
191+
<div class="close-button-container">
192+
<pf-button
193+
@click="${this.#OnClose}"
194+
?hidden="${this.#hideCloseButton()}"
195+
id="close-button"
196+
plain
197+
label="Close"
198+
>
199+
<pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
200+
</pf-button>
201+
</div>
202+
<button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
203+
</div>
204+
<div
205+
id="listbox-container"
206+
?hidden="${!expanded}"
207+
style="${styleMap({
208+
marginTop: `${height || 0}px`,
209+
width: width ? `${width}px` : 'auto',
210+
})}"
211+
>
212+
<div id="listbox">
213+
${this.#combobox.renderItemsToShadowRoot()}
214+
<slot ?hidden="${hideLightDomItems}"></slot>
215+
</div>
214216
</div>
215217
</div>
218+
<div class="submit-button-container">
219+
<slot name="submit"></slot>
220+
</div>
216221
</div>
217222
`;
218223
}
@@ -316,6 +321,27 @@ export class PfSearchInput extends LitElement {
316321
this.dispatchEvent(new PfSearchChangeEvent());
317322
}
318323
}
324+
325+
#onSubmit(event: MouseEvent | KeyboardEvent) {
326+
const path = event.composedPath();
327+
const slottedSearchButton = path.find(el =>
328+
el instanceof HTMLElement
329+
&& el.tagName === 'PF-BUTTON'
330+
&& el.getAttribute('data-action') === 'search'
331+
);
332+
333+
if (slottedSearchButton && this._toggleInput?.value) {
334+
this.value = this._toggleInput?.value;
335+
this.#internals.setFormValue(this.value ?? '');
336+
this.dispatchEvent(new PfSearchChangeEvent());
337+
}
338+
}
339+
340+
#handleKeyDown(e: KeyboardEvent) {
341+
if (e.key === 'Enter' || e.key === ' ') {
342+
this.#onSubmit(e);
343+
}
344+
}
319345
}
320346

321347
declare global {

0 commit comments

Comments
 (0)