diff --git a/CHANGELOG.md b/CHANGELOG.md index 966cd43dab..f4e6c7b254 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,7 @@ # Changelog + +# [23.10.1] = 2023/12/07 +* [UI]: Fixed issue where filter inputs required focus when they are opened on the project samples page. See [PR 1503](https://github.com/phac-nml/irida/pull/1503) ## [23.10] - 2023/10/15 * [Developer]: Added functionality to delete sequence files from file system when a sequence run is removed. [See PR 1468](https://github.com/phac-nml/irida/pull/1468) diff --git a/build.gradle.kts b/build.gradle.kts index 6355e8b1ba..fff4cf4b8b 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -14,7 +14,7 @@ plugins { } group = "ca.corefacility.bioinformatics" -version = "23.10" +version = "23.10.1" description = "irida" java { diff --git a/src/main/webapp/resources/js/pages/projects/samples/components/SamplesTable.jsx b/src/main/webapp/resources/js/pages/projects/samples/components/SamplesTable.jsx index 8ccc01cf88..8e802cc87b 100644 --- a/src/main/webapp/resources/js/pages/projects/samples/components/SamplesTable.jsx +++ b/src/main/webapp/resources/js/pages/projects/samples/components/SamplesTable.jsx @@ -32,6 +32,12 @@ const { RangePicker } = DatePicker; * @constructor */ export function SamplesTable() { + const nameInputRef = React.useRef(null); + const organismInputRef = React.useRef(null); + const collectedByInputRef = React.useRef(null); + const createdInputRef = React.useRef(null); + const modifiedInputRef = React.useRef(null); + const dispatch = useDispatch(); const { projectId, @@ -115,106 +121,139 @@ export function SamplesTable() { confirm({ closeDropdown: false }); }; + function determineCurrentRef(filterName) { + return filterName === "t-organism-select" + ? organismInputRef + : filterName === "t-name-select" + ? nameInputRef + : filterName === "t-collectedBy-select" + ? collectedByInputRef + : filterName === "t-created-filter" + ? createdInputRef + : filterName === "t-modified-filter" + ? modifiedInputRef + : null; + } const getColumnSearchProps = ( dataIndex, filterName = "", placeholder = "" - ) => ({ - filterDropdown: ({ - setSelectedKeys, - selectedKeys, - confirm, - clearFilters, - }) => ( -
- { - if (dates !== null) { - setSelectedKeys([ - [dates[0].startOf("day"), dates[1].endOf("day")], - ]); - confirm({ closeDropdown: false }); - } else { - handleClearSearch(clearFilters, confirm); - } + onChange={(e) => { + const values = Array.isArray(e) && e.length > 0 ? [e] : e; + setSelectedKeys(values); + confirm({ closeDropdown: false }); }} + style={{ marginBottom: 8, display: "block" }} + ref={currentRef} /> + + + +
- - - - - - ), - filterIcon: (filtered) => ( - - ), - }); + ), + filterIcon: (filtered) => ( + + ), + }; + }; + + const getDateColumnSearchProps = (filterName) => { + const currentRef = determineCurrentRef(filterName); + return { + onFilterDropdownVisibleChange: (visible) => { + if (visible) { + setTimeout(() => currentRef.current?.focus(), 100); + } + }, + filterDropdown: ({ + setSelectedKeys, + selectedKeys, + confirm, + clearFilters, + }) => ( +
+
+ { + if (dates !== null) { + setSelectedKeys([ + [dates[0].startOf("day"), dates[1].endOf("day")], + ]); + confirm({ closeDropdown: false }); + } else { + handleClearSearch(clearFilters, confirm); + } + }} + /> +
+ + + + +
+ ), + filterIcon: (filtered) => ( + + ), + }; + }; const columns = [ { @@ -298,7 +337,10 @@ export function SamplesTable() { title: i18n("SamplesTable.Column.collectedBy"), dataIndex: ["sample", "collectedBy"], sorter: true, - ...getColumnSearchProps(["sample", "collectedBy"]), + ...getColumnSearchProps( + ["sample", "collectedBy"], + "t-collectedBy-select" + ), }, { title: i18n("SamplesTable.Column.created"),