diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
index 5377041a..df142b16 100644
--- a/packages/ui/src/components/CodeMirrorSingleLine.vue
+++ b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -119,11 +119,15 @@ function getExtensions(vueInstance) {
 
                                 // get 3 characters before from or all characters before from if from < 3
                                 const before = text.slice(from - (from < 3 ? from : 3), from)
+                                // get 3 characters after to or all characters after to if to + 3 exceeds text length
+                                const after = text.slice(to, to + 3)
 
                                 let completionText = completion.label
 
                                 const condition1 = before.endsWith('{{')
                                 const condition2 = before.endsWith('{{ ')
+                                const condition3 = after.startsWith('}}')
+                                const condition4 = after.startsWith(' }}')
 
                                 if(condition1) {
                                     completionText = completionText + '}}'
@@ -137,6 +141,14 @@ function getExtensions(vueInstance) {
                                     completionText = '{{' + completionText + '}}'
                                 }
 
+                                if(condition3) {
+                                    completionText = completionText.slice(0, -2)
+                                }
+
+                                if(condition4) {
+                                    completionText = completionText.slice(0, -3)
+                                }
+
                                 view.dispatch({
                                     changes: { from, to, insert: completionText }
                                 })
diff --git a/packages/ui/tests/App_test.ts b/packages/ui/tests/App_test.ts
index ed1e7414..34547cd7 100644
--- a/packages/ui/tests/App_test.ts
+++ b/packages/ui/tests/App_test.ts
@@ -75,3 +75,47 @@ Scenario('Send GET request', async() => {
     I.expectContain(text, `* Preparing request to ${host}${path}${queryString}`)
     I.expectContain(text, `GET ${path}${queryString}`)
 })
+
+Scenario('Test env var autocompletion', async() => {
+    I.setDefaultEnvironment({
+        cat: 'dog'
+    })
+
+    I.createRequest('Env Auto Completion Test')
+
+    const addressBarInput = '.request-panel-address-bar .code-mirror-single-line .cm-content'
+
+    const clearAddressBar = async() => {
+        I.typeInRequestPanelAddressBar('', true)
+        I.expectEqual(await I.grabTextFrom(addressBarInput), 'Enter request URL')
+    }
+
+    const checkAutocomplete = async(value: string, expected: string) => {
+        I.typeInRequestPanelAddressBar(value)
+        I.wait(0.5)
+        I.pressKey('Enter')
+        I.expectEqual(await I.grabTextFrom(addressBarInput), expected)
+        await clearAddressBar()
+    }
+
+    const checkAutocompleteInBetween = async(initialValue: string, moveCursorToAfter: string, addCharacter: string, expected: string) => {
+        I.typeInRequestPanelAddressBar(initialValue)
+        I.pressKey('Home')
+        for(let i = 0; i < moveCursorToAfter.length; i++) {
+            I.pressKey('ArrowRight')
+        }
+        I.type(addCharacter)
+        I.wait(0.5)
+        I.pressKey('Enter')
+        I.expectEqual(await I.grabTextFrom(addressBarInput), expected)
+        await clearAddressBar()
+    }
+
+    await checkAutocomplete('other-content/c', 'other-content/{{cat}}')
+    await checkAutocomplete('other-content/{{ca', 'other-content/{{cat}}')
+    await checkAutocomplete('other-content/{{ ca', 'other-content/{{ cat }}')
+    await checkAutocompleteInBetween('other-content/{{c}}/something', 'other-content/{{c', 'a', 'other-content/{{cat}}/something')
+    await checkAutocompleteInBetween('other-content/{{ c }}/something', 'other-content/{{ c', 'a', 'other-content/{{ cat }}/something')
+    await checkAutocompleteInBetween('{{ca}}', '{{ca', 't', '{{cat}}')
+    await checkAutocompleteInBetween('ca}}', 'ca', 't', '{{cat}}')
+})
diff --git a/packages/ui/tests/steps_file.ts b/packages/ui/tests/steps_file.ts
index 45eba9c5..5ec42bda 100644
--- a/packages/ui/tests/steps_file.ts
+++ b/packages/ui/tests/steps_file.ts
@@ -36,6 +36,12 @@ export = function() {
             }
 
             this.type(url)
-        }
+        },
+
+        setDefaultEnvironment(obj: any) {
+            this.click('.navbar-item > a')
+            this.fillField('.code-mirror-editor .cm-content', JSON.stringify(obj))
+            this.click('Done')
+        },
     })
 }