Skip to content

fix(TextInputGroup): address various issues #6774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 5 commits into from
Jan 20, 2022
Merged

fix(TextInputGroup): address various issues #6774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5182e6f
fix(TextInputGroup): address various issues
wise-king-sullyman Jan 11, 2022
b7b85b5
updates test snapshots
wise-king-sullyman Jan 12, 2022
89a5f6a
closes menu and focuses input on tab, enter, and space
wise-king-sullyman Jan 13, 2022
ecdc2cb
updates tab to always close the menu
wise-king-sullyman Jan 17, 2022
0b266d4
conditionally renders text input group utilities
wise-king-sullyman Jan 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
onBlur?: (event?: any) => void;
/** Accessibility label for the input */
'aria-label'?: string;
/** Value for the input */
value?: string | number;
/** Placeholder value for the input */
placeholder?: string;
}

export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
Expand All @@ -43,6 +47,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
onBlur,
'aria-label': ariaLabel = 'Type to filter',
value: inputValue,
placeholder: inputPlaceHolder,
...props
}: TextInputGroupMainProps) => {
const { isDisabled } = React.useContext(TextInputGroupContext);
Expand All @@ -64,7 +69,8 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
onChange={handleChange}
onFocus={onFocus}
onBlur={onBlur}
value={inputValue}
value={inputValue || ''}
placeholder={inputPlaceHolder}
/>
</span>
</div>
Expand Down
6 changes: 6 additions & 0 deletions ...t-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ exports[`TextInputGroup gets custom class and id 1`] = `
className="pf-c-text-input-group__text-input"
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand Down Expand Up @@ -53,6 +54,7 @@ exports[`TextInputGroup renders content 1`] = `
className="pf-c-text-input-group__text-input"
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand Down Expand Up @@ -87,6 +89,7 @@ exports[`TextInputGroup renders with the proper stying when disabled 1`] = `
disabled={true}
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand Down Expand Up @@ -115,6 +118,7 @@ exports[`TextInputGroupMain renders content 1`] = `
disabled={false}
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand Down Expand Up @@ -172,6 +176,7 @@ exports[`TextInputGroupMain renders given input icon props 1`] = `
disabled={false}
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand All @@ -195,6 +200,7 @@ exports[`TextInputGroupMain renders the input with custom aria label when given
disabled={false}
onChange={[Function]}
type="text"
value=""
/>
</span>
</div>
Expand Down
19 changes: 12 additions & 7 deletions packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
/** show the input/chip clearing button only when either the text input or chip group are not empty */
const showClearButton = !!inputValue || !!currentChips.length;

/** render the utilities component only when a component it contains is being rendered */
const showUtilities = showClearButton;

/** callback for clearing all selected chips and the text input */
const clearChipsAndInput = () => {
setCurrentChips([]);
Expand All @@ -57,13 +60,15 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
))}
</ChipGroup>
</TextInputGroupMain>
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
{showUtilities && (
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
)}
</TextInputGroup>
);
};
19 changes: 12 additions & 7 deletions ...ages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
/** show the input clearing button only when the input is not empty */
const showClearButton = !!inputValue;

/** render the utilities component only when a component it contains is being rendered */
const showUtilities = showClearButton;

/** callback for clearing the text input */
const clearInput = () => {
setInputValue('');
Expand All @@ -22,13 +25,15 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
return (
<TextInputGroup>
<TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
{showUtilities && (
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
)}
</TextInputGroup>
);
};
21 changes: 13 additions & 8 deletions packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,12 +205,15 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
}
};

/** only show the search icon when no chips are selected */
/** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
const showSearchIcon = !currentChips.length;

/** only show the clear button when there is something that can be cleared */
const showClearButton = !!inputValue || !!currentChips.length;

/** render the utilities component only when a component it contains is being rendered */
const showUtilities = showClearButton;

const inputGroup = (
<div ref={textInputGroupRef}>
<TextInputGroup>
Expand All @@ -229,13 +232,15 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
))}
</ChipGroup>
</TextInputGroupMain>
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
{showUtilities && (
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
)}
</TextInputGroup>
</div>
);
Expand Down
44 changes: 29 additions & 15 deletions packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,11 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
}
};

const handleTab = (event: React.KeyboardEvent) => {
const handleTab = () => {
if (menuItems.length === 3) {
setInputValue(menuItems[2].props.children);
event.preventDefault();
}
setMenuIsOpen(false);
};

/** close the menu when escape is hit */
Expand Down Expand Up @@ -129,7 +129,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
handleEscape();
break;
case 'Tab':
handleTab(event);
handleTab();
break;
case 'ArrowUp':
case 'ArrowDown':
Expand Down Expand Up @@ -166,19 +166,29 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {

/** enable keyboard only usage while focused on the menu */
const handleMenuKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Escape') {
setInputValue('');
focusTextInput();
setMenuIsOpen(false);
switch (event.key) {
case 'Tab':
case 'Escape':
event.preventDefault();
focusTextInput();
setMenuIsOpen(false);
break;
case 'Enter':
case ' ':
setTimeout(() => setMenuIsOpen(false), 0);
break;
}
};

/** only show the search icon when no chips are selected */
/** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
const showSearchIcon = !currentChips.length;

/** only show the clear button when there is something that can be cleared */
const showClearButton = !!inputValue || !!currentChips.length;

/** render the utilities component only when a component it contains is being rendered */
const showUtilities = showClearButton;

const inputGroup = (
<div ref={textInputGroupRef}>
<TextInputGroup>
Expand All @@ -188,6 +198,8 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
onChange={handleInputChange}
onFocus={() => setMenuIsOpen(true)}
onKeyDown={handleTextInputKeyDown}
placeholder="search"
aria-label="Search input"
>
<ChipGroup>
{currentChips.map(currentChip => (
Expand All @@ -197,13 +209,15 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
))}
</ChipGroup>
</TextInputGroupMain>
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
{showUtilities && (
<TextInputGroupUtilities>
{showClearButton && (
<Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button for chips and input">
<TimesIcon />
</Button>
)}
</TextInputGroupUtilities>
)}
</TextInputGroup>
</div>
);
Expand Down