From 292c346c3140b193f040395bcf251347b7449221 Mon Sep 17 00:00:00 2001
From: Johannes Baiter <johannes.baiter@bsb-muenchen.de>
Date: Thu, 26 Nov 2020 13:57:02 +0100
Subject: [PATCH] Fix crashes in content search autocomplete code
---
src/components/SearchPanelControls.js | 20 ++++++++++++--------
1 file changed, 12 insertions(+), 8 deletions(-)
diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js
index 2b8a8887b..391f57bca 100644
--- a/src/components/SearchPanelControls.js
+++ b/src/components/SearchPanelControls.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import deburr from 'lodash/deburr';
import debounce from 'lodash/debounce';
+import isObject from 'lodash/isObject';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CircularProgress from '@material-ui/core/CircularProgress';
import TextField from '@material-ui/core/TextField';
@@ -9,6 +10,10 @@ import SearchIcon from '@material-ui/icons/SearchSharp';
import MiradorMenuButton from '../containers/MiradorMenuButton';
import SearchPanelNavigation from '../containers/SearchPanelNavigation';
+/** Sometimes an autocomplete match can be a simple string, other times an object
+ with a `match` property, this function abstracts that away */
+const getMatch = (option) => (isObject(option) ? option.match : option);
+
/** */
export class SearchPanelControls extends Component {
/** */
@@ -25,8 +30,7 @@ export class SearchPanelControls extends Component {
}
/**
- * Set the component's local search state
- * to blank when the query has been cleared
+ * Update the query in the component state if the query has changed in the redux store
*/
componentDidUpdate(prevProps) {
const { query } = this.props;
@@ -98,8 +102,8 @@ export class SearchPanelControls extends Component {
/** */
selectItem(_event, selectedItem, _reason) {
- if (selectedItem && selectedItem.match) {
- this.setState({ search: selectedItem.match }, this.submitSearch);
+ if (selectedItem && getMatch(selectedItem)) {
+ this.setState({ search: getMatch(selectedItem) }, this.submitSearch);
}
}
@@ -118,15 +122,15 @@ export class SearchPanelControls extends Component {
id={id}
inputValue={search}
options={suggestions}
- getOptionLabel={option => option.match}
+ getOptionLabel={getMatch}
getOptionSelected={(option, value) => (
- deburr(option.match.trim()).toLowerCase()
- === deburr(value.match.trim()).toLowerCase()
+ deburr(getMatch(option).trim()).toLowerCase()
+ === deburr(getMatch(value).trim()).toLowerCase()
)}
noOptionsText=""
onChange={this.selectItem}
onInputChange={this.handleChange}
- freeSolo={true}
+ freeSolo
renderInput={params => (
<TextField
{...params}
--
GitLab