diff --git a/src/components/rich-text-editor/core-rich-text-editor.html b/src/components/rich-text-editor/core-rich-text-editor.html
index 7874c0162..ba2bd897f 100644
--- a/src/components/rich-text-editor/core-rich-text-editor.html
+++ b/src/components/rich-text-editor/core-rich-text-editor.html
@@ -1,81 +1,81 @@
-<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" [attr.data-placeholder-text]="placeholder" role="textbox">
+<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
 </div>
 
-<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (longPress)="showToolbar()" role="textbox"></ion-textarea>
+<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" role="textbox"></ion-textarea>
 
 <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev()">
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="stopBubble($event)">
         <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
     </button>
     <ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-bold"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-italic"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-underline"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-strikethrough"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-paragraph"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>1
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>2
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>3
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-list-ul"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-list-ol"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')">
+            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-eraser"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)">
+            <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-code"></core-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
-            <button (click)="hideToolbar()">
+            <button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-close"></core-icon>
             </button>
         </ion-slide>
     </ion-slides>
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext()">
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext($event)" (mousedown)="stopBubble($event)">
         <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
     </button>
 </div>
diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss
index 0cf3a5960..9460297fd 100644
--- a/src/components/rich-text-editor/rich-text-editor.scss
+++ b/src/components/rich-text-editor/rich-text-editor.scss
@@ -80,6 +80,8 @@ ion-app.app-root core-rich-text-editor {
             align-items: center;
             width: 36px;
             height: 36px;
+            padding-right: 6px;
+            padding-left: 6px;
             margin: 0 auto;
             font-size: 18px;
             background-color: $white;
diff --git a/src/components/rich-text-editor/rich-text-editor.ts b/src/components/rich-text-editor/rich-text-editor.ts
index 45e572d37..b0261ba75 100644
--- a/src/components/rich-text-editor/rich-text-editor.ts
+++ b/src/components/rich-text-editor/rich-text-editor.ts
@@ -533,10 +533,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
      * @param {any} $event Event data
      * @param {string} command Command to execute.
      */
-    protected buttonAction($event: any, command: string): void {
-        $event.preventDefault();
-        $event.stopPropagation();
-        this.editorElement.focus();
+    buttonAction($event: any, command: string): void {
+        this.stopBubble($event);
 
         if (command) {
             if (command.includes('|')) {
@@ -553,8 +551,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
     /**
      * Hide the toolbar.
      */
-    hideToolbar(): void {
-        this.editorElement.focus();
+    hideToolbar($event: any): void {
+        this.stopBubble($event);
+
         this.toolbarHidden = true;
     }
 
@@ -566,26 +565,38 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         this.toolbarHidden = false;
     }
 
+    /**
+     * Stop event default and propagation.
+     *
+     * @param {Event} event Event.
+     */
+    stopBubble(event: Event): void {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
     /**
      * Method that shows the next toolbar buttons.
      */
-    toolbarNext(): void {
+    toolbarNext($event: any): void {
+        this.stopBubble($event);
+
         if (!this.toolbarNextHidden) {
             const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
             this.toolbarSlides.slideTo(currentIndex + this.numToolbarButtons);
         }
-        this.editorElement.focus();
     }
 
     /**
      * Method that shows the previous toolbar buttons.
      */
-    toolbarPrev(): void {
+    toolbarPrev($event: any): void {
+        this.stopBubble($event);
+
         if (!this.toolbarPrevHidden) {
             const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
             this.toolbarSlides.slideTo(currentIndex - this.numToolbarButtons);
         }
-        this.editorElement.focus();
     }
 
     /**
@@ -597,14 +608,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
             return;
         }
 
-        if (!(this.toolbarSlides as any)._init) {
-            // Slides is not initialized yet, try later.
+        const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
+
+        if (!(this.toolbarSlides as any)._init || !width) {
+            // Slides is not initialized or width is not available yet, try later.
             setTimeout(this.updateToolbarButtons.bind(this), 100);
 
             return;
         }
 
-        const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
         if (width > this.toolbarSlides.length() * this.toolbarButtonWidth) {
             this.numToolbarButtons = this.toolbarSlides.length();
             this.toolbarArrows = false;