diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx index 2a9eeba..4429f1f 100644 --- a/react/src/LoadPluginDialog.tsx +++ b/react/src/LoadPluginDialog.tsx @@ -607,6 +607,11 @@ export const LoadPluginDialog = this.hSearchTimeout = undefined; } + handleApplyFilter() + { + this.handleSearchStringReady(); + } + cancelSearchTimeout() { if (this.hSearchTimeout) { @@ -734,6 +739,9 @@ export const LoadPluginDialog = onTextChanged={(text) => { this.handleSearchStringChanged(text); }} + onApplyFilter={() => { + this.handleApplyFilter(); + }} onClearFilterClick={() => { if (this.state.search_string !== "") { this.requestScrollTo(); diff --git a/react/src/SearchControl.tsx b/react/src/SearchControl.tsx index cfff2f1..d134b42 100644 --- a/react/src/SearchControl.tsx +++ b/react/src/SearchControl.tsx @@ -17,7 +17,7 @@ // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -import React from 'react'; +import React, { KeyboardEvent } from 'react'; import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; import withStyles from '@mui/styles/withStyles'; @@ -39,6 +39,7 @@ interface SearchControlProps extends WithStyles { onTextChanged: (searchString: string) => void; onClick: () => void; onClearFilterClick: () => void; + onApplyFilter: () => void; inputRef?: React.RefObject; showSearchIcon?: boolean @@ -66,6 +67,17 @@ const SearchControl = withStyles(styles, { withTheme: true })( } return this.defaultInputRef; } + onKeyDown(ev: KeyboardEvent) + { + ev.stopPropagation(); // don't let the ENTER key propagate propagate the enclosing dialog Enter key handler. + if (ev.key === "Enter") + { + this.props.onApplyFilter(); + } else if (ev.key === "Escape") + { + this.props.onClearFilterClick(); + } + } componentDidUpdate(oldProps: SearchControlProps) { if (oldProps.collapsed ?? false !== this.props.collapsed ?? false) { let inputRef = this.getInputRef(); @@ -96,7 +108,9 @@ const SearchControl = withStyles(styles, { withTheme: true })( ) } - {this.onKeyDown(ev);}} + style={{ flex: "1 1", visibility: (this.props.collapsed ?? false) ? "collapse" : "visible", marginRight: 12, height: 32, }} inputRef={this.getInputRef()}