diff --git a/core/src/components/toggle/test/rtl/e2e.ts b/core/src/components/toggle/test/rtl/e2e.ts
new file mode 100644
index 0000000000..a9530b417b
--- /dev/null
+++ b/core/src/components/toggle/test/rtl/e2e.ts
@@ -0,0 +1,11 @@
+
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toggle: RTL', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/toggle/test/rtl?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toggle/test/rtl/index.html b/core/src/components/toggle/test/rtl/index.html
new file mode 100644
index 0000000000..04581ac61b
--- /dev/null
+++ b/core/src/components/toggle/test/rtl/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Toggle - RTL
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle - RTL
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index eaad0e04b6..5e32f2d2b9 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -4,6 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import { hapticSelection } from '../../utils/native/haptic';
+import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
@@ -138,7 +139,7 @@ export class Toggle implements ComponentInterface {
}
private onMove(detail: GestureDetail) {
- if (shouldToggle(document, this.checked, detail.deltaX, -10)) {
+ if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {
this.checked = !this.checked;
hapticSelection();
}
@@ -224,9 +225,7 @@ export class Toggle implements ComponentInterface {
}
}
-const shouldToggle = (doc: HTMLDocument, checked: boolean, deltaX: number, margin: number): boolean => {
- const isRTL = doc.dir === 'rtl';
-
+const shouldToggle = (isRTL: boolean, checked: boolean, deltaX: number, margin: number): boolean => {
if (checked) {
return (!isRTL && (margin > deltaX)) ||
(isRTL && (- margin < deltaX));