From 26705963de8fb6fb2524d4922aea4423cb10f306 Mon Sep 17 00:00:00 2001
From: Talha12Shiekh <tk.shiekh4567@gmail.com>
Date: Mon, 3 Aug 2026 22:57:40 +0500
Subject: [PATCH] fix(web): make showLoadMore button focusable and interactive
 via keyboard

---
 .../web/src/components/list/MultiDropdownList.js   | 14 +++++++++++++-
 packages/web/src/components/list/MultiList.js      | 14 +++++++++++++-
 .../web/src/components/list/SingleDropdownList.js  | 14 +++++++++++++-
 packages/web/src/components/list/SingleList.js     | 14 +++++++++++++-
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/list/MultiDropdownList.js b/packages/web/src/components/list/MultiDropdownList.js
index bce5b7fac..82ef2eb55 100644
--- a/packages/web/src/components/list/MultiDropdownList.js
+++ b/packages/web/src/components/list/MultiDropdownList.js
@@ -326,6 +326,13 @@ class MultiDropdownList extends Component {
 		this.updateQueryOptions(this.props, true);
 	};
 
+	handleKeyPress = (e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			this.handleLoadMore();
+		}
+	};
+
 	handleChange = (e) => {
 		let currentValue = e;
 		if (isEvent(e)) {
@@ -424,7 +431,12 @@ class MultiDropdownList extends Component {
 						showLoadMore
 						&& !isLastBucket && (
 							<div css={loadMoreContainer}>
-								<Button disabled={isLoading} onClick={this.handleLoadMore}>
+								<Button
+									disabled={isLoading}
+									onClick={this.handleLoadMore}
+									onKeyPress={this.handleKeyPress}
+									tabIndex={0}
+								>
 									{loadMoreLabel}
 								</Button>
 							</div>
diff --git a/packages/web/src/components/list/MultiList.js b/packages/web/src/components/list/MultiList.js
index 9a933ddbb..a5b5ba265 100644
--- a/packages/web/src/components/list/MultiList.js
+++ b/packages/web/src/components/list/MultiList.js
@@ -364,6 +364,13 @@ class MultiList extends Component {
 		this.props.loadMore(this.props.componentId, queryOptions);
 	};
 
+	handleKeyPress = (e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			this.handleLoadMore();
+		}
+	};
+
 	renderSearch = () => {
 		if (this.props.showSearch) {
 			return (
@@ -594,7 +601,12 @@ class MultiList extends Component {
 							: this.props.renderNoResults && this.props.renderNoResults()}
 						{showLoadMore && !isLastBucket && (
 							<div css={loadMoreContainer}>
-								<Button disabled={isLoading} onClick={this.handleLoadMore}>
+								<Button
+									disabled={isLoading}
+									onClick={this.handleLoadMore}
+									onKeyPress={this.handleKeyPress}
+									tabIndex={0}
+								>
 									{loadMoreLabel}
 								</Button>
 							</div>
diff --git a/packages/web/src/components/list/SingleDropdownList.js b/packages/web/src/components/list/SingleDropdownList.js
index 02d100224..e6499ce25 100644
--- a/packages/web/src/components/list/SingleDropdownList.js
+++ b/packages/web/src/components/list/SingleDropdownList.js
@@ -235,6 +235,13 @@ class SingleDropdownList extends Component {
 		this.updateQueryOptions(this.props, true);
 	};
 
+	handleKeyPress = (e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			this.handleLoadMore();
+		}
+	};
+
 	handleChange = (e) => {
 		let currentValue = e;
 		if (isEvent(e)) {
@@ -333,7 +340,12 @@ class SingleDropdownList extends Component {
 						showLoadMore
 						&& !isLastBucket && (
 							<div css={loadMoreContainer}>
-								<Button disabled={isLoading} onClick={this.handleLoadMore}>
+								<Button
+									disabled={isLoading}
+									onClick={this.handleLoadMore}
+									onKeyPress={this.handleKeyPress}
+									tabIndex={0}
+								>
 									{loadMoreLabel}
 								</Button>
 							</div>
diff --git a/packages/web/src/components/list/SingleList.js b/packages/web/src/components/list/SingleList.js
index 6ad88fd8c..700e5c302 100644
--- a/packages/web/src/components/list/SingleList.js
+++ b/packages/web/src/components/list/SingleList.js
@@ -278,6 +278,13 @@ class SingleList extends Component {
 		this.props.loadMore(this.props.componentId, queryOptions);
 	};
 
+	handleKeyPress = (e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			this.handleLoadMore();
+		}
+	};
+
 	renderSearch = () => {
 		if (this.props.showSearch) {
 			return (
@@ -485,7 +492,12 @@ class SingleList extends Component {
 							: this.props.renderNoResults && this.props.renderNoResults()}
 						{showLoadMore && !isLastBucket && (
 							<div css={loadMoreContainer}>
-								<Button disabled={isLoading} onClick={this.handleLoadMore}>
+								<Button
+									disabled={isLoading}
+									onClick={this.handleLoadMore}
+									onKeyPress={this.handleKeyPress}
+									tabIndex={0}
+								>
 									{loadMoreLabel}
 								</Button>
 							</div>