Fix select components (#5394)

* pass correct filter prop to select component

* update changelog

* Update frontend/javascripts/admin/task/task_list_view.js

Co-authored-by: Daniel <[email protected]>

Co-authored-by: Daniel <[email protected]>

Author: philippotto

CHANGELOG.unreleased.md

@@ -23,6 +23,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed a bug where some values in the project list were displayed incorrectly after pausing/unpausing the project. [#5339](https://github.com/scalableminds/webknossos/pull/5339)
 - Fixed that editing a task type would always re-add the default values to the recommended configuration (if enabled). [#5341](https://github.com/scalableminds/webknossos/pull/5341)
 - Fixed a bug where tasks created from existing volume annotations that did not have a specified bounding box were broken. [#5362](https://github.com/scalableminds/webknossos/pull/5361)
+- Fixed broken search functionality in select components. [#5394](https://github.com/scalableminds/webknossos/pull/5394)
 - Fixed a bug which could cause corrupted trees when CTRL+Rightclick was used in an empty tree. [#5385](https://github.com/scalableminds/webknossos/pull/5385)
 - Fixed a bug in Safari which could cause an error message (which is safe to ignore). [#5373](https://github.com/scalableminds/webknossos/pull/5373)
 - Fixed artifacts in screenshots near the dataset border. [#5324](https://github.com/scalableminds/webknossos/pull/5324)

frontend/javascripts/admin/dataset/dataset_components.js

@@ -82,7 +82,7 @@ export function DatastoreFormItem({
       <Select
         showSearch
         placeholder="Select a Datastore"
-        optionFilterProp="children"
+        optionFilterProp="label"
         style={{ width: "100%" }}
         options={datastores.map((datastore: APIDataStore) => ({
           label: datastore.name,

frontend/javascripts/admin/project/project_create_view.js

@@ -102,7 +102,7 @@ function ProjectCreateView({ projectName }: PropsWithRouter) {
             <Select
               showSearch
               placeholder="Select a Team"
-              optionFilterProp="children"
+              optionFilterProp="label"
               style={fullWidth}
               disabled={isEditMode}
               notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}
@@ -117,7 +117,7 @@ function ProjectCreateView({ projectName }: PropsWithRouter) {
             <Select
               showSearch
               placeholder="Select a User"
-              optionFilterProp="children"
+              optionFilterProp="label"
               style={fullWidth}
               disabled={isEditMode}
               notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}

frontend/javascripts/admin/scripts/script_create_view.js

@@ -92,7 +92,7 @@ function ScriptCreateView({ scriptId, activeUser, history }: PropsWithRouter) {
             <Select
               showSearch
               placeholder="Select a User"
-              optionFilterProp="children"
+              optionFilterProp="label"
               style={{ width: "100%" }}
               notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}
               options={users.map((user: APIUser) => ({

frontend/javascripts/admin/task/task_create_form_view.js

@@ -415,7 +415,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                   ? "The dataset is inferred from the base annotation."
                   : "Select a Dataset"
               }
-              optionFilterProp="children"
+              optionFilterProp="label"
               style={fullWidth}
               disabled={
                 isEditingMode || this.state.specificationType === SpecificationEnum.BaseAnnotation
@@ -469,7 +469,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                 <Select
                   showSearch
                   placeholder="Select a TaskType"
-                  optionFilterProp="children"
+                  optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
                   notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
@@ -522,7 +522,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                 <Select
                   showSearch
                   placeholder="Select a Project"
-                  optionFilterProp="children"
+                  optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
                   notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
@@ -537,7 +537,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                 <Select
                   showSearch
                   placeholder="Select a Script"
-                  optionFilterProp="children"
+                  optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
                   notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}

frontend/javascripts/admin/task/task_search_form.js

@@ -204,7 +204,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 showSearch
                 allowClear
                 placeholder="Select a Task Type"
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
                 options={this.state.taskTypes.map((taskType: APITaskType) => ({
@@ -222,7 +222,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 allowClear
                 showSearch
                 placeholder="Select a Project"
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
                 options={this.state.projects.map((project: APIProject) => ({
@@ -238,7 +238,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 allowClear
                 showSearch
                 placeholder="Select a User"
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
                 options={this.state.users

frontend/javascripts/admin/tasktype/task_type_create_view.js

@@ -205,7 +205,7 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
                 allowClear
                 showSearch
                 placeholder="Select a Team"
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
                 options={this.state.teams.map((team: APITeam) => ({
@@ -260,7 +260,7 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
                 mode="multiple"
                 allowClear
                 placeholder="Select all Allowed Modes"
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 options={[
                   { value: "orthogonal", label: "Orthogonal" },
@@ -273,7 +273,7 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
             <FormItem name={["settings", "preferredMode"]} label="Preferred Mode" hasFeedback>
               <Select
                 allowClear
-                optionFilterProp="children"
+                optionFilterProp="label"
                 style={{ width: "100%" }}
                 options={[
                   { value: null, label: "Any" },

frontend/javascripts/admin/time/time_line_view.js

@@ -275,7 +275,7 @@ class TimeLineView extends React.PureComponent<Props, State> {
                     allowClear
                     showSearch
                     placeholder="Select a User"
-                    optionFilterProp="children"
+                    optionFilterProp="label"
                     style={{ width: "100%" }}
                     onChange={this.handleUserChange}
                     notFoundContent={this.state.isFetchingUsers ? <Spin size="small" /> : "No Data"}

frontend/javascripts/admin/user/user_selection_component.js

@@ -61,7 +61,7 @@ class UserSelectionComponent extends React.PureComponent<Props, State> {
         placeholder="Select a New User"
         value={this.state.currentUserIdValue}
         onChange={this.handleSelectChange}
-        optionFilterProp="children"
+        optionFilterProp="label"
         style={{ width: "100%" }}
         filterOption={(input, option) =>
           option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0