feat: Add support for tab in autocompletion (#22653)

## Description
This adds the ability to select an option from the autocomplete
suggestions list using the `Tab` key while writing code. Earlier, users
could use only the `Enter` key to do so. All code editors support `Tab`
for autocomplete.

Fixes #20448 

## Type of change
- New feature (non-breaking change which adds functionality)


## How Has This Been Tested?
- Cypress

### Test Plan
[Test Plan](https://github.com/appsmithorg/TestSmith/issues/2377)

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Autocomplete/PropertyPaneSuggestion_spec.ts

@@ -49,4 +49,15 @@ describe("Property Pane Suggestions", () => {
       1,
     );
   });
+
+  it("3. Should add Autocomplete Suggestions on Tab press", () => {
+    EntityExplorer.SelectEntityByName("Button1", "Widgets");
+    PropertyPane.TypeTextIntoField("Label", "{{");
+    AggregateHelper.GetNAssertElementText(CommonLocators._hints, "appsmith");
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    cy.get("body").tab();
+
+    PropertyPane.ValidatePropertyFieldValue("Label", "{{appsmith}}");
+  });
 });

app/client/cypress/package.json

@@ -30,6 +30,7 @@
       "cypress-file-upload": "^4.1.1",
       "cypress-image-snapshot": "^4.0.1",
       "cypress-multi-reporters": "^1.2.4",
+      "cypress-plugin-tab": "^1.0.5",
       "cypress-real-events": "^1.7.1",
       "cypress-wait-until": "^1.7.2",
       "cypress-xpath": "^1.4.0",

app/client/cypress/support/index.js

@@ -30,6 +30,7 @@ import "./queryCommands";
 import "./widgetCommands";
 import "./themeCommands";
 import "./AdminSettingsCommands";
+import "cypress-plugin-tab";
 /// <reference types="cypress-xpath" />
 
 Cypress.on("uncaught:exception", () => {

app/client/package.json

@@ -268,6 +268,7 @@
     "cypress-file-upload": "^4.1.1",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-multi-reporters": "^1.2.4",
+    "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.1",
     "cypress-wait-until": "^1.7.2",
     "cypress-xpath": "^1.4.0",

app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts

@@ -85,7 +85,6 @@ export enum CodeEditorBorder {
 
 export enum AUTOCOMPLETE_CLOSE_KEY {
   Enter,
-  Tab,
   Escape,
   Comma,
   Semicolon,

app/client/yarn.lock

@@ -7267,6 +7267,14 @@ algoliasearch@^4.2.0:
     "@algolia/requester-node-http" "4.5.1"
     "@algolia/transporter" "4.5.1"
 
+ally.js@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/ally.js/-/ally.js-1.4.1.tgz#9fb7e6ba58efac4ee9131cb29aa9ee3b540bcf1e"
+  integrity sha512-ZewdfuwP6VewtMN36QY0gmiyvBfMnmEaNwbVu2nTS6zRt069viTgkYgaDiqu6vRJ1VJCriNqV0jGMu44R8zNbA==
+  dependencies:
+    css.escape "^1.5.0"
+    platform "1.3.3"
+
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -9507,7 +9515,7 @@ css-what@^5.0.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
   integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
 
-css.escape@^1.5.1:
+css.escape@^1.5.0, css.escape@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
 
@@ -9675,6 +9683,13 @@ cypress-multi-reporters@^1.2.4:
     debug "^4.1.1"
     lodash "^4.17.15"
 
+cypress-plugin-tab@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/cypress-plugin-tab/-/cypress-plugin-tab-1.0.5.tgz#a40714148104004bb05ed62b1bf46bb544f8eb4a"
+  integrity sha512-QtTJcifOVwwbeMP3hsOzQOKf3EqKsLyjtg9ZAGlYDntrCRXrsQhe4ZQGIthRMRLKpnP6/tTk6G0gJ2sZUfRliQ==
+  dependencies:
+    ally.js "^1.4.1"
+
 cypress-real-events@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.1.tgz#8f430d67c29ea4f05b9c5b0311780120cbc9b935"
@@ -16675,6 +16690,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+platform@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.3.tgz#646c77011899870b6a0903e75e997e8e51da7461"
+  integrity sha512-VJK1SRmXBpjwsB4YOHYSturx48rLKMzHgCqDH2ZDa6ZbMS/N5huoNqyQdK5Fj/xayu3fqbXckn5SeCS1EbMDZg==
+
 plist@^3.0.1:
   version "3.0.5"
   resolved "https://registry.npmjs.org/plist/-/plist-3.0.5.tgz"