fix: Autocomplete doesn't show up in square brackets when the identifier has invalid characters (#22134)

## Description
Autocomplete doesn't show up in square brackets when the identifier has
invalid characters

Fixes #13983 

## Type of change
- Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?
- Manual
- Cypress

### Test Plan
> Add Testsmith test cases links that relate to this PR

### 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
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] 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
- [x] 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/Autocomplete_Spec.ts

@@ -24,7 +24,27 @@ describe("Autocomplete bug fixes", function () {
     );
   });
 
-  it("2. Bug #14990 Checks if copied widget show up on autocomplete suggestions", function () {
+  it("2. Bug #13983 Verifies if object properties are in autocomplete list", function () {
+    ee.SelectEntityByName("Text1");
+    propPane.TypeTextIntoField("Text", '{{Table1.selectedRow["');
+    agHelper.AssertElementExist(locator._hints);
+    agHelper.GetNAssertElementText(locator._hints, "status", "contain.text");
+
+    propPane.TypeTextIntoField("Text", "{{Table1.selectedRow['");
+    agHelper.AssertElementExist(locator._hints);
+    agHelper.GetNAssertElementText(locator._hints, "status", "contain.text");
+  });
+
+  it("3. Bug #13983 Verifies if object properties are in autocomplete list", function () {
+    ee.SelectEntityByName("Text1");
+    propPane.TypeTextIntoField("Text", '{{Table1.selectedRo"');
+    agHelper.AssertElementAbsence(locator._hints);
+
+    propPane.TypeTextIntoField("Text", '{{"');
+    agHelper.AssertElementAbsence(locator._hints);
+  });
+
+  it("4. Bug #14990 Checks if copied widget show up on autocomplete suggestions", function () {
     ee.CopyPasteWidget("Text1");
     ee.SelectEntityByName("Text1");
     propPane.UpdatePropertyFieldValue("Text", "");
@@ -39,7 +59,7 @@ describe("Autocomplete bug fixes", function () {
     );
   });
 
-  it("3. Bug #14100 Custom columns name label change should reflect in autocomplete", function () {
+  it("5. Bug #14100 Custom columns name label change should reflect in autocomplete", function () {
     // select table widget
     ee.SelectEntityByName("Table1");
     // add new column
@@ -64,7 +84,7 @@ describe("Autocomplete bug fixes", function () {
     );
   });
 
-  it("4. feat #16426 Autocomplete for fast-xml-parser", function () {
+  it("6. feat #16426 Autocomplete for fast-xml-parser", function () {
     ee.SelectEntityByName("Text1");
     propPane.TypeTextIntoField("Text", "{{xmlParser.j");
     agHelper.GetNAssertElementText(locator._hints, "j2xParser");
@@ -73,7 +93,7 @@ describe("Autocomplete bug fixes", function () {
     agHelper.GetNAssertElementText(locator._hints, "parse");
   });
 
-  it("5. Installed library should show up in autocomplete", function () {
+  it("7. Installed library should show up in autocomplete", function () {
     ee.ExpandCollapseEntity("Libraries");
     installer.openInstaller();
     installer.installLibrary("uuidjs", "UUID");
@@ -83,7 +103,7 @@ describe("Autocomplete bug fixes", function () {
     agHelper.GetNAssertElementText(locator._hints, "UUID");
   });
 
-  it("6. No autocomplete for Removed libraries", function () {
+  it("8. No autocomplete for Removed libraries", function () {
     ee.RenameEntityFromExplorer("Text1Copy", "UUIDTEXT");
     installer.uninstallLibrary("uuidjs");
     propPane.TypeTextIntoField("Text", "{{UUID.");

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -1091,16 +1091,24 @@ class CodeEditor extends Component<Props, State> {
     const cursor = cm.getCursor();
     const line = cm.getLine(cursor.line);
     let showAutocomplete = false;
+    const prevChar = line[cursor.ch - 1];
+
     /* Check if the character before cursor is completable to show autocomplete which backspacing */
     if (key === "/" && !isCtrlOrCmdPressed) {
       showAutocomplete = true;
     } else if (event.code === "Backspace") {
-      const prevChar = line[cursor.ch - 1];
       showAutocomplete = !!prevChar && /[a-zA-Z_0-9.]/.test(prevChar);
     } else if (key === "{") {
       /* Autocomplete for { should show up only when a user attempts to write {{}} and not a code block. */
-      const prevChar = line[cursor.ch - 1];
       showAutocomplete = prevChar === "{";
+    } else if (key === "'" || key === '"') {
+      /* Autocomplete for [ should show up only when a user attempts to write {['']} for Object property suggestions. */
+      showAutocomplete = prevChar === "[";
+
+      if (!showAutocomplete) {
+        // @ts-expect-error: Types are not available
+        cm.closeHint();
+      }
     } else if (key.length == 1) {
       showAutocomplete = /[a-zA-Z_0-9.]/.test(key);
       /* Autocomplete should be triggered only for characters that make up valid variable names */

app/client/src/utils/autocomplete/CodemirrorTernService.ts

@@ -377,7 +377,7 @@ class CodeMirrorTernService {
           origins: true,
           caseInsensitive: true,
           guess: false,
-          inLiteral: false,
+          inLiteral: true,
         },
         (error, data) => this.requestCallback(error, data, cm, resolve),
       );