Skip to content

Commit 83faa65

Browse files
ArathyKumarArathyKumar
committed
chore: search input with submit button variant added
1 parent fc1bcba commit 83faa65

File tree

3 files changed

+86
-119
lines changed

3 files changed

+86
-119
lines changed

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

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
1-
<div class="container">
1+
<form class="container">
22
<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>
3+
<div class="search-input-container">
4+
<pf-search-input id="search-input" name="search" placeholder="Search">
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+
<pf-button> Search</pf-button>
27+
</div>
28+
</form>
29+
2730

2831
<script type="module">
2932
import '@patternfly/elements/pf-search-input/pf-search-input.js';
@@ -35,11 +38,26 @@ <h1>Search with autocomplete</h1>
3538
console.log('Selected:', event.target.value);
3639
/* eslint-disable no-console */
3740
});
38-
</script
41+
42+
const form = document.querySelector('form.container');
43+
form.addEventListener('submit', (event) =>{
44+
event.preventDefault();
45+
/* eslint-disable no-console */
46+
console.log("Value:", form.elements.search?.value);
47+
/* eslint-disable no-console */
48+
})
3949
</script>
4050

4151
<style>
4252
.container {
4353
padding: 40px;
54+
.search-input-container {
55+
display: flex;
56+
align-items: center;
57+
justify-content: flex-start;
58+
#search-input {
59+
margin-right: 1rem;
60+
}
61+
}
4462
}
4563
</style>

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

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -388,29 +388,4 @@ div.search-icon {
388388
::slotted(pf-option[selected]) {
389389
--_pf-option-svg-display: none;
390390
--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
391-
}
392-
393-
pf-text-input {
394-
--pf-c-form-control--LineHeight: 36px;
395-
--pf-c-form-control--PaddingTop: 0px;
396-
--pf-c-form-control--PaddingBottom: 0px;
397-
--pf-c-form-control--PaddingLeft: 2.5rem;
398-
--pf-c-form-control--BorderWidth: 0px;
399-
--pf-c-form-control--Width: 100%;
400-
401-
border: none;
402-
box-sizing: border-box;
403-
}
404-
405-
.search-input-container {
406-
display: flex;
407-
align-items: center;
408-
justify-content: flex-start;
409-
position: relative;
410-
}
411-
412-
.submit-button-container {
413-
position: absolute;
414-
top: 0;
415-
right: -100px;
416391
}

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

Lines changed: 42 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { arraysAreEquivalent } from '@patternfly/pfe-core/functions/arraysAreEqu
1717
import { observes } from '@patternfly/pfe-core/decorators/observes.js';
1818
import { PfOption } from '../pf-select/pf-option.js';
1919
import { bound } from '@patternfly/pfe-core/decorators.js';
20-
import '@patternfly/elements/pf-text-input/pf-text-input.js';
2120
import styles from './pf-search-input.css';
2221

2322
export class PfSearchChangeEvent extends Event {
@@ -83,8 +82,6 @@ export class PfSearchInput extends LitElement {
8382

8483
@query('#outer') private _searchInputContainer!: HTMLElement;
8584

86-
// #isNotPlaceholderOption = (option: PfOption) => option !== this._placeholder;
87-
8885
#internals = InternalsController.of(this);
8986

9087
#float = new FloatingDOMController(this, { content: () => this._listboxContainer });
@@ -172,51 +169,46 @@ export class PfSearchInput extends LitElement {
172169
const hideLightDomItems = !ComboboxController.supportsCrossRootActiveDescendant;
173170

174171
return html`
175-
<div class="search-input-container">
176-
<div
177-
id="outer"
178-
style="${styleMap(styles)}"
179-
class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
180-
>
181-
<div id="toggle">
182-
<div class="search-icon">
183-
<pf-icon size="md" icon="search" set="fas">search</pf-icon>
184-
</div>
185-
<input
186-
id="toggle-input"
187-
?disabled="${disabled}"
188-
@keydown=${this.#onSearchInput}
189-
placeholder="${placeholder}">
190-
<div class="close-button-container">
191-
<pf-button
192-
@click="${this.#OnClose}"
193-
?hidden="${this.#hideCloseButton()}"
194-
id="close-button"
195-
plain
196-
label="Close"
197-
>
198-
<pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
199-
</pf-button>
200-
</div>
201-
<button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
172+
<div
173+
id="outer"
174+
style="${styleMap(styles)}"
175+
class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
176+
>
177+
<div id="toggle">
178+
<div class="search-icon">
179+
<pf-icon size="md" icon="search" set="fas">search</pf-icon>
202180
</div>
203-
<div
204-
id="listbox-container"
205-
?hidden="${!expanded}"
206-
style="${styleMap({
207-
marginTop: `${height || 0}px`,
208-
width: width ? `${width}px` : 'auto',
209-
})}"
181+
<input
182+
id="toggle-input"
183+
?disabled="${disabled}"
184+
@change=${this.#onChange}
185+
@keyup=${this.#onSubmit}
186+
placeholder="${placeholder}"
210187
>
211-
<div id="listbox">
212-
${this.#combobox.renderItemsToShadowRoot()}
213-
<slot ?hidden="${hideLightDomItems}"></slot>
214-
</div>
188+
<div class="close-button-container">
189+
<pf-button
190+
@click="${this.#OnClose}"
191+
?hidden="${this.#hideCloseButton()}"
192+
id="close-button"
193+
plain
194+
label="Close"
195+
>
196+
<pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
197+
</pf-button>
215198
</div>
199+
<button aria-label="toggle button" inert class="visually-hidden" id="toggle-button"></button>
216200
</div>
217-
<div @click=${this.#onSubmit} @keydown=${this.#handleKeyDown}
218-
class="submit-button-container">
219-
<slot name="submit"></slot>
201+
<div
202+
id="listbox-container"
203+
?hidden="${!expanded}"
204+
style="${styleMap({
205+
marginTop: `${height || 0}px`,
206+
width: width ? `${width}px` : 'auto',
207+
})}">
208+
<div id="listbox">
209+
${this.#combobox.renderItemsToShadowRoot()}
210+
<slot ?hidden="${hideLightDomItems}"></slot>
211+
</div>
220212
</div>
221213
</div>
222214
`;
@@ -252,7 +244,6 @@ export class PfSearchInput extends LitElement {
252244
this.dispatchEvent(new PfSearchChangeEvent());
253245
}
254246

255-
256247
async #doExpand() {
257248
try {
258249
await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -314,34 +305,17 @@ export class PfSearchInput extends LitElement {
314305
return false;
315306
}
316307

317-
#onSearchInput(event: KeyboardEvent) {
318-
if (event.key === 'Enter' || event.key === ' ') {
319-
this.value = this._toggleInput?.value;
320-
this.#internals.setFormValue(this.value ?? '');
321-
this.dispatchEvent(new PfSearchChangeEvent());
322-
}
308+
#onChange(event: Event) {
309+
this.value = this._toggleInput?.value;
310+
this.#internals.setFormValue(this.value ?? '');
311+
this.dispatchEvent(new PfSearchChangeEvent());
323312
}
324313

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 ?? '');
314+
#onSubmit(event: KeyboardEvent) {
315+
if (event.key === 'Enter' || event.key === ' ') {
336316
this.dispatchEvent(new PfSearchChangeEvent());
337317
}
338318
}
339-
340-
#handleKeyDown(e: KeyboardEvent) {
341-
if (e.key === 'Enter' || e.key === ' ') {
342-
this.#onSubmit(e);
343-
}
344-
}
345319
}
346320

347321
declare global {

0 commit comments

Comments
 (0)