diff --git a/src/commands/math.ts b/src/commands/math.ts
index 196bc75d6..95f5dce74 100644
--- a/src/commands/math.ts
+++ b/src/commands/math.ts
@@ -725,6 +725,9 @@ API.StaticMath = function (APIClasses: APIClasses) {
       this.config(opts as MathQuill.v3.Config);
       // `mathquillify` calls `createTextarea`
       super.mathquillify('mq-math-mode');
+      if (this.__options.enableDigitGrouping) {
+        this.__controller.root.domFrag().addClass('mq-show-grouping');
+      }
       this.__controller.setupStaticField();
       if (this.__options.mouseEvents) {
         this.__controller.addMouseEventListener();
diff --git a/src/css/math.less b/src/css/math.less
index 47bbdb146..6f6f0485f 100644
--- a/src/css/math.less
+++ b/src/css/math.less
@@ -21,38 +21,28 @@
     margin-right: @expand-margin;
   }
 
-  .mq-group-start {
-    margin-left: @digit-separator;
-    margin-right: @contract-margin;
-  }
-
-  .mq-group-other {
-    margin-left: @contract-margin;
-    margin-right: @contract-margin;
-  }
-
-  .mq-group-leading-1,
-  .mq-group-leading-2 {
-    margin-left: 0;
-    margin-right: @contract-margin;
-  }
+  &.mq-show-grouping {
+    .mq-group-start {
+      margin-left: @digit-separator;
+      margin-right: @contract-margin;
+    }
 
-  .mq-group-leading-3 {
-    margin-left: 4 * @expand-margin;
-    margin-right: @contract-margin;
-  }
+    .mq-group-other {
+      margin-left: @contract-margin;
+      margin-right: @contract-margin;
+    }
 
-  &.mq-suppress-grouping {
-    .mq-group-start,
-    .mq-group-other,
     .mq-group-leading-1,
-    .mq-group-leading-2,
+    .mq-group-leading-2 {
+      margin-left: 0;
+      margin-right: @contract-margin;
+    }
+
     .mq-group-leading-3 {
-      margin-left: @expand-margin;
-      margin-right: @expand-margin;
+      margin-left: 4 * @expand-margin;
+      margin-right: @contract-margin;
     }
   }
-
   .mq-ellipsis-start {
     margin-left: @ellipsis-separator;
     margin-right: @ellipsis-internal-sep;
diff --git a/src/services/focusBlur.ts b/src/services/focusBlur.ts
index 9cb549014..2b0a3b0bd 100644
--- a/src/services/focusBlur.ts
+++ b/src/services/focusBlur.ts
@@ -11,25 +11,21 @@ ControllerBase.onNotify(function (cursor, e) {
     // blurred === undefined means we are not focused.
     if (controller.blurred !== false) return;
 
-    controller.disableGroupingForSeconds(1);
+    controller.hideGroupingForEdit();
   }
 });
 
 class Controller_focusBlur extends Controller_exportText {
   blurred: boolean;
-  __disableGroupingTimeout: number;
+  __showGroupingTimeout: number;
   textareaSelectionTimeout: number;
 
-  disableGroupingForSeconds(seconds: number) {
-    clearTimeout(this.__disableGroupingTimeout);
-    if (seconds === 0) {
-      this.root.domFrag().removeClass('mq-suppress-grouping');
-    } else {
-      this.root.domFrag().addClass('mq-suppress-grouping');
-      this.__disableGroupingTimeout = setTimeout(() => {
-        this.root.domFrag().removeClass('mq-suppress-grouping');
-      }, seconds * 1000);
-    }
+  hideGroupingForEdit() {
+    clearTimeout(this.__showGroupingTimeout);
+    this.root.domFrag().removeClass('mq-show-grouping');
+    this.__showGroupingTimeout = setTimeout(() => {
+      this.root.domFrag().addClass('mq-show-grouping');
+    }, 1000);
   }
 
   private blurTimeout: number;
@@ -55,7 +51,10 @@ class Controller_focusBlur extends Controller_exportText {
       clearTimeout(this.textareaSelectionTimeout);
       this.textareaSelectionTimeout = 0;
     }
-    this.disableGroupingForSeconds(0);
+    if (this.options.enableDigitGrouping) {
+      clearTimeout(this.__showGroupingTimeout);
+      this.root.domFrag().addClass('mq-show-grouping');
+    }
     this.blurred = true;
     this.blurTimeout = setTimeout(() => {
       // wait for blur on window; if
@@ -114,6 +113,9 @@ class Controller_focusBlur extends Controller_exportText {
     });
     ctrlr.blurred = true;
     cursor.hide().parent.blur(cursor);
+    if (ctrlr.options.enableDigitGrouping) {
+      ctrlr.root.domFrag().addClass('mq-show-grouping');
+    }
   }
 
   addStaticFocusBlurListeners() {
diff --git a/test/unit/digit-grouping.test.js b/test/unit/digit-grouping.test.js
index 0ba1e4656..21e10bd0f 100644
--- a/test/unit/digit-grouping.test.js
+++ b/test/unit/digit-grouping.test.js
@@ -45,7 +45,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '',
       tree: {
-        classes: 'mq-root-block mq-empty',
+        classes: 'mq-root-block mq-empty mq-show-grouping',
         content: ''
       }
     });
@@ -54,7 +54,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1\\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -71,7 +71,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ 1',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -88,7 +88,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ 1\\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -108,7 +108,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: 'a',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: 'a'
@@ -121,7 +121,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: 'a\\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: 'a'
@@ -137,7 +137,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ a',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -153,7 +153,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: 'a\\ a',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: 'a'
@@ -172,7 +172,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ a\\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -191,7 +191,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '.',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -205,7 +205,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '.\\ .',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -226,7 +226,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '..',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -244,7 +244,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '2..',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -267,7 +267,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '..2',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -289,7 +289,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ \\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -305,7 +305,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '\\ \\ \\ ',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             content: ' '
@@ -324,7 +324,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1234',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit mq-group-leading-1',
@@ -354,7 +354,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '',
       tree: {
-        classes: 'mq-root-block mq-empty',
+        classes: 'mq-root-block mq-empty mq-show-grouping',
         content: ''
       }
     });
@@ -363,7 +363,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '.2322',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit', content: '.' },
           { classes: 'mq-digit', content: '2' },
@@ -378,7 +378,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1.2322',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit',
@@ -412,7 +412,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1231.123',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit mq-group-leading-1',
@@ -454,7 +454,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1231.432',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit mq-group-leading-1',
@@ -496,7 +496,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1231232.432',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           {
             classes: 'mq-digit mq-group-leading-1',
@@ -550,7 +550,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345...67890',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit', content: '1' },
           { classes: 'mq-digit', content: '2' },
@@ -579,7 +579,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345...67890',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit mq-group-leading-2', content: '1' },
           { classes: 'mq-digit mq-group-other', content: '2' },
@@ -601,7 +601,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345....67890',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit mq-group-leading-2', content: '1' },
           { classes: 'mq-digit mq-group-other', content: '2' },
@@ -625,7 +625,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1...\\ 6789',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit', content: '1' },
           { classes: 'mq-digit mq-ellipsis-start', content: '.' },
@@ -643,7 +643,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345.\\ ..6789',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit', content: '1' },
           { classes: 'mq-digit', content: '2' },
@@ -676,7 +676,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1...6789.2345',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit', content: '1' },
           { classes: 'mq-digit mq-ellipsis-start', content: '.' },
@@ -690,7 +690,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '6789.2345...6789.2345',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           ...n6789_2345,
           { classes: 'mq-digit mq-ellipsis-start', content: '.' },
@@ -704,7 +704,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '6789.2345...6789',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           ...n6789_2345,
           { classes: 'mq-digit mq-ellipsis-start', content: '.' },
@@ -721,7 +721,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345...67890...12345',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit mq-group-leading-2', content: '1' },
           { classes: 'mq-digit mq-group-other', content: '2' },
@@ -758,7 +758,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1234-...',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit mq-group-leading-1', content: '1' },
           { classes: 'mq-digit mq-group-start', content: '2' },
@@ -775,7 +775,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1234,\\ ...',
       tree: {
-        classes: 'mq-root-block',
+        classes: 'mq-root-block mq-show-grouping',
         content: [
           { classes: 'mq-digit mq-group-leading-1', content: '1' },
           { classes: 'mq-digit mq-group-start', content: '2' },
@@ -1220,7 +1220,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '',
       tree: {
-        classes: 'mq-root-block mq-empty',
+        classes: 'mq-root-block mq-empty mq-show-grouping',
         content: ''
       }
     });
@@ -1229,7 +1229,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '',
       tree: {
-        classes: 'mq-root-block mq-hasCursor',
+        classes: 'mq-root-block mq-show-grouping mq-hasCursor',
         content: [
           {
             classes: 'mq-cursor'
@@ -1242,7 +1242,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1',
       tree: {
-        classes: 'mq-root-block mq-hasCursor mq-suppress-grouping',
+        classes: 'mq-root-block mq-hasCursor',
         content: [
           {
             classes: 'mq-digit',
@@ -1261,7 +1261,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '1234',
       tree: {
-        classes: 'mq-root-block mq-hasCursor mq-suppress-grouping',
+        classes: 'mq-root-block mq-hasCursor',
         content: [
           {
             classes: 'mq-digit mq-group-leading-1',
@@ -1290,7 +1290,7 @@ suite('Digit Grouping', function () {
     assertClasses(mq, {
       latex: '12345',
       tree: {
-        classes: 'mq-root-block mq-hasCursor mq-suppress-grouping',
+        classes: 'mq-root-block mq-hasCursor',
         content: [
           {
             classes: 'mq-digit mq-group-leading-2',
@@ -1323,7 +1323,7 @@ suite('Digit Grouping', function () {
       assertClasses(mq, {
         latex: '12345',
         tree: {
-          classes: 'mq-root-block mq-hasCursor',
+          classes: 'mq-root-block mq-hasCursor mq-show-grouping',
           content: [
             {
               classes: 'mq-digit mq-group-leading-2',
@@ -1356,7 +1356,7 @@ suite('Digit Grouping', function () {
       assertClasses(mq, {
         latex: '12345',
         tree: {
-          classes: 'mq-root-block mq-hasCursor',
+          classes: 'mq-root-block mq-hasCursor mq-show-grouping',
           content: [
             {
               classes: 'mq-digit mq-group-leading-2',
@@ -1389,7 +1389,7 @@ suite('Digit Grouping', function () {
       assertClasses(mq, {
         latex: '1235',
         tree: {
-          classes: 'mq-root-block mq-hasCursor mq-suppress-grouping',
+          classes: 'mq-root-block mq-hasCursor',
           content: [
             {
               classes: 'mq-digit mq-group-leading-1',
@@ -1419,7 +1419,7 @@ suite('Digit Grouping', function () {
         assertClasses(mq, {
           latex: '1235',
           tree: {
-            classes: 'mq-root-block',
+            classes: 'mq-root-block mq-show-grouping',
             content: [
               {
                 classes: 'mq-digit mq-group-leading-1',
@@ -1442,6 +1442,6 @@ suite('Digit Grouping', function () {
         });
         done();
       }, 1);
-    }, 1100); // should stop suppressing grouping after 1000ms
+    }, 1100); // should stop hiding grouping after 1000ms
   });
 });