diff --git a/packages/axes/src/const.ts b/packages/axes/src/const.ts index 024a21f5..016d3bbd 100644 --- a/packages/axes/src/const.ts +++ b/packages/axes/src/const.ts @@ -75,6 +75,9 @@ export const TRANSFORM = (() => { })(); export const PREVENT_DRAG_CSSPROPS = { + "-webkit-user-select": "none", /* Safari */ + "-ms-user-select": "none", /* IE 10 and IE 11 */ + "-moz-user-select": "none", /* Firefox 2-68 */ "user-select": "none", "-webkit-user-drag": "none", }; diff --git a/packages/axes/test/unit/utils.spec.js b/packages/axes/test/unit/utils.spec.js index 4d8b4808..8af5e602 100644 --- a/packages/axes/test/unit/utils.spec.js +++ b/packages/axes/test/unit/utils.spec.js @@ -82,19 +82,31 @@ describe("Util Functions", () => { it("should check element's css properties includes properties from PREVENT_DRAG_CSSPROPS", () => { // Given const cssProps1 = { + "-webkit-user-select": "none", + "-ms-user-select": "none", + "-moz-user-select": "none", "touch-action": "auto", "user-select": "none", "-webkit-user-drag": "none", }; const cssProps2 = { + "-webkit-user-select": "none", + "-ms-user-select": "none", + "-moz-user-select": "none", "touch-action": "none", "user-select": "text", "-webkit-user-drag": "auto", }; const cssProps3 = { + "-webkit-user-select": "none", + "-ms-user-select": "none", + "-moz-user-select": "none", "text-align": "center", }; const cssProps4 = { + "-webkit-user-select": "none", + "-ms-user-select": "none", + "-moz-user-select": "none", "user-select": "none", "-webkit-user-drag": "none", }; @@ -110,6 +122,18 @@ describe("Util Functions", () => { }); describe("setCssProps", () => { + it(`should check css properties are correctly set to element`, () => { + // Given + setCssProps(el, {}, DIRECTION_ALL); + + // Then + expect(el.style["-webkit-user-select"]).to.be.equal("none"); + expect(el.style["-ms-user-select"]).to.be.equal("none"); + expect(el.style["user-select"]).to.be.equal("none"); + expect(el.style["-webkit-user-drag"]).to.be.equal("none"); + expect(el.style["touch-action"]).to.be.equal("none"); + }); + [ DIRECTION_NONE, DIRECTION_ALL,