From 23f327410a2f9272b5cec3d3bba88f448a0de222 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara@apache.org>
Date: Tue, 30 Dec 2025 00:29:13 +0530
Subject: [PATCH] RANGER-5330 : Disable tab selection in Ranger UI form fields

---
 .../webapp/react-webapp/src/utils/XAUtils.js  |  2 +-
 .../PermissionsModule/EditPermission.jsx      |  8 +++++---
 .../PolicyListing/AddUpdatePolicyForm.jsx     | 19 +++++++++++++++++++
 .../PolicyListing/PolicyPermissionItem.jsx    |  6 ++++++
 .../PolicyListing/TagBasePermissionItem.jsx   |  1 +
 .../src/views/Reports/UserAccessLayout.jsx    |  6 ++++++
 .../src/views/Resources/ResourceComp.jsx      |  1 +
 .../views/Resources/ResourceSelectComp.jsx    | 14 ++++++++++++++
 .../views/SecurityZone/SecurityZoneForm.jsx   |  8 ++++++++
 .../ServiceManager/ServiceAuditFilter.jsx     |  3 +++
 .../ServiceManager/ServiceDefinitions.jsx     |  1 +
 .../src/views/ServiceManager/ServiceForm.jsx  |  8 ++------
 .../src/views/SideBar/TopNavBar.jsx           |  2 ++
 .../role_details/RoleForm.jsx                 |  6 ++++++
 .../users_details/UserForm.jsx                |  3 +++
 15 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
index 21a163531f..0f9f66b589 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAUtils.js
@@ -1082,7 +1082,7 @@ export const InfoIcon = (props) => {
 };
 
 /* Edit Permission Module Infinite Scroll */
-export const CustomInfinteScroll = (props) => {
+export const CustomInfiniteScroll = (props) => {
   const { data, removeUsrGrp, scrollableDiv } = props;
   const [count, setCount] = useState({
     startIndex: 0,
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
index c482363a1d..e2d422130d 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PermissionsModule/EditPermission.jsx
@@ -39,7 +39,7 @@ import { toast } from "react-toastify";
 import { cloneDeep, find, findIndex, isEmpty, map, reverse } from "lodash";
 import { AccessResult } from "Utils/XAEnums";
 import {
-  CustomInfinteScroll,
+  CustomInfiniteScroll,
   commonBreadcrumb,
   serverError
 } from "Utils/XAUtils";
@@ -414,6 +414,7 @@ const EditPermission = () => {
                                         placeholder="Select Groups"
                                         isMulti
                                         styles={selectInputCustomStyles}
+                                        tabSelectsValue={false}
                                       />
                                       <Button
                                         size="sm"
@@ -461,6 +462,7 @@ const EditPermission = () => {
                                         placeholder="Select Users"
                                         isMulti
                                         styles={selectInputCustomStyles}
+                                        tabSelectsValue={false}
                                       />
 
                                       <Button
@@ -502,7 +504,7 @@ const EditPermission = () => {
                                       ></Spinner>
                                     </div>
                                   ) : (
-                                    <CustomInfinteScroll
+                                    <CustomInfiniteScroll
                                       data={selectedGrp}
                                       removeUsrGrp={handleRemoveGrp}
                                       scrollableDiv="scrollableGrpDiv"
@@ -528,7 +530,7 @@ const EditPermission = () => {
                                       ></Spinner>
                                     </div>
                                   ) : (
-                                    <CustomInfinteScroll
+                                    <CustomInfiniteScroll
                                       data={selectedUsr}
                                       removeUsrGrp={handleRemoveUsr}
                                       scrollableDiv="scrollableUsrDiv"
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
index 515c2b0d0b..2981b74f99 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
@@ -1393,6 +1393,25 @@ export default function AddUpdatePolicyForm() {
                                   }}
                                   defaultOptions={defaultPolicyLabelOptions}
                                   styles={selectInputCustomStyles}
+                                  // Add this prop to trim the visual "Create" label
+                                  formatCreateLabel={(inputValue) =>
+                                    `Create "${inputValue.trim()}"`
+                                  }
+                                  // Add this prop to trim the value when a tag is created
+                                  onCreateOption={(inputValue) => {
+                                    const policyLabelVal = inputValue.trim();
+                                    if (policyLabelVal) {
+                                      input.onChange([
+                                        ...input.value,
+                                        {
+                                          label: policyLabelVal,
+                                          value: policyLabelVal
+                                        }
+                                      ]);
+                                    }
+                                  }}
+                                  tabSelectsValue={false}
+                                  placeholder="Add Policy Labels"
                                 />
                               </Col>
                             </FormB.Group>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
index 4496f75419..69325c2dd3 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyPermissionItem.jsx
@@ -371,6 +371,8 @@ export default function PolicyPermissionItem(props) {
                                       styles={customStyles}
                                       cacheOptions
                                       isMulti
+                                      tabSelectsValue={false}
+                                      placeholder="Select Roles"
                                     />
                                   </div>
                                 )}
@@ -402,6 +404,8 @@ export default function PolicyPermissionItem(props) {
                                       styles={customStyles}
                                       cacheOptions
                                       isMulti
+                                      tabSelectsValue={false}
+                                      placeholder="Select Groups"
                                     />
                                   </div>
                                 )}
@@ -433,6 +437,8 @@ export default function PolicyPermissionItem(props) {
                                       styles={customStyles}
                                       cacheOptions
                                       isMulti
+                                      tabSelectsValue={false}
+                                      placeholder="Select Users"
                                     />
                                   </div>
                                 )}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
index 083bba71cb..7d164dedce 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/TagBasePermissionItem.jsx
@@ -373,6 +373,7 @@ export default function TagBasePermissionItem(props) {
                         isClearable={false}
                         isSearchable={true}
                         placeholder="Select Service Name"
+                        tabSelectsValue={false}
                       />
                     </FormB.Group>
                   )}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
index 2d30c3c22b..5dc1c6914d 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Reports/UserAccessLayout.jsx
@@ -538,6 +538,7 @@ function UserAccessLayout() {
                                   ]}
                                   menuPlacement="auto"
                                   placeholder="Select Policy Type"
+                                  tabSelectsValue={false}
                                 />
                               )}
                             </Field>
@@ -558,6 +559,7 @@ function UserAccessLayout() {
                                   menuPlacement="auto"
                                   placeholder="Select Component Type"
                                   styles={selectInputCustomStyles}
+                                  tabSelectsValue={false}
                                 />
                               )}
                             </Field>
@@ -596,6 +598,7 @@ function UserAccessLayout() {
                                   loadOptions={fetchPolicyLabels}
                                   placeholder="Select Policy Label"
                                   styles={selectInputCustomStyles}
+                                  tabSelectsValue={false}
                                 />
                               )}
                             </Field>
@@ -617,6 +620,7 @@ function UserAccessLayout() {
                                       menuPlacement="auto"
                                       placeholder="Select Zone Name"
                                       styles={selectInputCustomStyles}
+                                      tabSelectsValue={false}
                                     />
                                   )}
                                 </Field>
@@ -654,6 +658,7 @@ function UserAccessLayout() {
                                     onChange={(e) =>
                                       onChangeSearchBy(e, input, values)
                                     }
+                                    tabSelectsValue={false}
                                   />
                                 )}
                               </Field>
@@ -814,6 +819,7 @@ function SearchByAsyncSelect(props) {
             DropdownIndicator: () => null,
             IndicatorSeparator: () => null
           }}
+          tabSelectsValue={false}
         />
       )}
     </Field>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
index 661e8237dd..b71448dbca 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
@@ -209,6 +209,7 @@ export default function ResourceComp(props) {
                         }
                         isSearchable={false}
                         styles={selectInputCustomStyles}
+                        tabSelectsValue={false}
                       />
                     </span>
                     <RenderValidateField name={`resourceName-${levelKey}`} />
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
index 128796f559..d1b676b5ca 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
@@ -216,6 +216,20 @@ export default function ResourceSelectComp(props) {
             filterOption={customFilterOptions}
             isLoading={isLoading}
             styles={selectInputCustomStyles}
+            formatCreateLabel={(inputValue) => `Create "${inputValue.trim()}"`}
+            onCreateOption={(inputValue) => {
+              const trimmedValue = inputValue.trim();
+              if (trimmedValue) {
+                const newOption = { label: trimmedValue, value: trimmedValue };
+                const currentValue = input.value || [];
+                const newValue = isArray(currentValue)
+                  ? [...currentValue, newOption]
+                  : [newOption];
+                input.onChange(newValue);
+              }
+            }}
+            tabSelectsValue={false}
+            placeholder="Add policy Resources"
           />
           {formValues &&
             formValues[`resourceName-${levelKey}`]?.mandatory &&
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
index 12a3764582..d3a26b1cdc 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
@@ -874,6 +874,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Users"
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
@@ -918,6 +919,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Groups"
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
@@ -962,6 +964,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Roles"
+                              tabSelectsValue={false}
                             />
                             {meta.touched && meta.error && (
                               <span className="invalid-field">
@@ -1011,6 +1014,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Users"
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
@@ -1055,6 +1059,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Groups"
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
@@ -1099,6 +1104,7 @@ const SecurityZoneForm = () => {
                               }}
                               isClearable={true}
                               placeholder="Select Roles"
+                              tabSelectsValue={false}
                             />
                             {meta.error && meta.touched && (
                               <span className="invalid-field">
@@ -1140,6 +1146,7 @@ const SecurityZoneForm = () => {
                               isClearable={true}
                               placeholder="Select Tag Services"
                               styles={selectInputCustomStyles}
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
@@ -1177,6 +1184,7 @@ const SecurityZoneForm = () => {
                               isSearchable={true}
                               placeholder="Select Resource Services"
                               styles={selectInputCustomStyles}
+                              tabSelectsValue={false}
                             />
                           </Col>
                         </Row>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
index 36d0d6aa1a..9468bef967 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceAuditFilter.jsx
@@ -429,6 +429,7 @@ export default function ServiceAuditFilter(props) {
                                   isMulti
                                   styles={selectInputCustomStyles}
                                   placeholder="Select Roles"
+                                  tabSelectsValue={false}
                                 />
                               </div>
                             )}
@@ -469,6 +470,7 @@ export default function ServiceAuditFilter(props) {
                                   isMulti
                                   styles={selectInputCustomStyles}
                                   placeholder="Select Groups"
+                                  tabSelectsValue={false}
                                 />
                               </div>
                             )}
@@ -509,6 +511,7 @@ export default function ServiceAuditFilter(props) {
                                   isMulti
                                   styles={selectInputCustomStyles}
                                   placeholder="Select Users"
+                                  tabSelectsValue={false}
                                 />
                               </div>
                             )}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
index c3d0a2b673..d1fb1de588 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceDefinitions.jsx
@@ -409,6 +409,7 @@ class ServiceDefinitions extends Component {
                   })}
                   menuPlacement="auto"
                   placeholder="Select Zone Name"
+                  tabSelectsValue={false}
                 />
               </div>
             )}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
index 40d871904f..c710ae44ba 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
@@ -984,16 +984,12 @@ class ServiceForm extends Component {
         undefined
       );
 
-  SelectField = ({ input, ...rest }) => (
-    <Select {...input} {...rest} searchable />
-  );
-
   AsyncSelectField = ({ input, ...rest }) => (
-    <AsyncSelect {...input} {...rest} cacheOptions />
+    <AsyncSelect {...input} {...rest} cacheOptions tabSelectsValue={false} />
   );
 
   AsyncCreatableSelectField = ({ input, ...rest }) => (
-    <AsyncCreatableSelect {...input} {...rest} />
+    <AsyncCreatableSelect {...input} {...rest} tabSelectsValue={false} />
   );
 
   fetchUsers = async (inputValue) => {
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
index 8e7aa43e79..764591b8ef 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/SideBar/TopNavBar.jsx
@@ -206,6 +206,7 @@ export const TopNavBar = (props) => {
           menuPlacement="auto"
           placeholder="Select Service Name"
           hideSelectedOptions
+          tabSelectsValue={false}
         />
         {!isKMSRole && (
           <React.Fragment>
@@ -223,6 +224,7 @@ export const TopNavBar = (props) => {
               placeholder="Select Zone Name"
               isClearable
               hideSelectedOptions
+              tabSelectsValue={false}
             />
           </React.Fragment>
         )}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
index 222d901f5d..2f82f1a055 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
@@ -634,6 +634,8 @@ function RoleForm() {
                             data-name="usersSelect"
                             data-cy="usersSelect"
                             styles={selectInputCustomStyles}
+                            tabSelectsValue={false}
+                            placeholder="Select Users"
                           />
                         </div>
                         <div className="col-sm-3">
@@ -741,6 +743,8 @@ function RoleForm() {
                             data-name="groupsSelect"
                             data-cy="groupsSelect"
                             styles={selectInputCustomStyles}
+                            tabSelectsValue={false}
+                            placeholder="Select Groups"
                           />
                         </div>
                         <div className="col-sm-3">
@@ -848,6 +852,8 @@ function RoleForm() {
                             data-name="rolesSelect"
                             data-cy="rolesSelect"
                             styles={selectInputCustomStyles}
+                            tabSelectsValue={false}
+                            placeholder="Select Roles"
                           />
                         </div>
                         <div className="col-sm-3">
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
index 2eb9e5a858..aa47e137ee 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
@@ -241,6 +241,8 @@ function UserForm(props) {
           isEditView && userInfo && isExternalOrFederatedUser ? true : false
         }
         styles={selectInputCustomStyles}
+        tabSelectsValue={false}
+        placeholder="Select Groups"
       />
     );
   };
@@ -710,6 +712,7 @@ function UserForm(props) {
                         options={userRoleListData()}
                         onChange={(e) => getUserRole(e, input)}
                         isDisabled={disabledUserRoleField()}
+                        tabSelectsValue={false}
                       ></Select>
                     )}
                   ></Field>