text-area-click-fix

BipanKishore · Jul 14, 2024 · 28ff9bc · 28ff9bc
1 parent b9b2204
commit 28ff9bc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/packages/resizable-core/src/utils/dom.ts b/packages/resizable-core/src/utils/dom.ts
@@ -49,7 +49,6 @@ export const getResizableEventFromMouse = (e: any, vertical: boolean): IResizabl
 }
 
 export const getResizableEvent = (e: any, vertical: boolean, previousTouchEvent: any): IResizableEvent => {
-  e.preventDefault()
   return isTouchEvent(e)
     ? getResizableEventFromTouch(e, vertical, previousTouchEvent)
     : getResizableEventFromMouse(e, vertical)

diff --git a/packages/resizable-panes-react/cypress/component-testing/fix-test-ids.ts b/packages/resizable-panes-react/cypress/component-testing/fix-test-ids.ts
@@ -21,6 +21,8 @@ export const maxSizeClassTest = 'maxSizeClassTest'
 
 const loadingId = 'loading'
 const loadedId = 'loaded'
+
+const textAreaP1 = 'textArea-P1'
 export {
   containerId,
   loadingId,
@@ -31,5 +33,6 @@ export {
   rScontainerId,
   R0, R1, R2, R3, R4, R5,
   CK0, CK1, CK2, CK3, CK4, CK5, CK6,
-  P0, P1, P2, P3, P4, P5, P6
+  P0, P1, P2, P3, P4, P5, P6,
+  textAreaP1
 }
diff --git a/packages/resizable-panes-react/cypress/component-testing/models/pane-model.cy.tsx b/packages/resizable-panes-react/cypress/component-testing/models/pane-model.cy.tsx
@@ -6,7 +6,7 @@ import {
   noMinMax5PanesSet,
   withMinMaxWithMinMaxUnitPixel5PanesSet
 } from '../pane-model-config-sets'
-import {CK0, L0, LG0, R0, R1, rScontainerId} from '../fix-test-ids'
+import {CK0, L0, LG0, R0, R1, rScontainerId, textAreaP1} from '../fix-test-ids'
 import {CustomResizerFirst} from '../../components/custom-resizer'
 import {ResizableComponentCustomPanesTestWrapper}
   from '../../components/rp-test-wrapper/resizable-component-custom-panes-test-wrapper'
@@ -220,4 +220,36 @@ describe('Test Pane Model', () => {
       })
     })
   })
+
+  describe('Text area editing', () => {
+    it('should call api method getMap', () => {
+      cy.viewport(1000, 1000)
+      cy.mount(
+        <ResizableComponentCustomPanesTestWrapper
+          resizer={<CustomResizerFirst horizontal={false} size={10} />}
+          resizerSize={10}
+          storageApi={localStorage}
+          uniqueId={rScontainerId}
+          unmountOnHide={false}
+          vertical
+        >
+          <Pane
+            className="bg-orange-500" id="P0" size={1}
+            unmountOnHide={true}
+          >
+
+            <textarea className='w-100p h-100p' data-cy={textAreaP1} />
+          </Pane>
+          <Pane className="bg-teal-500" id="P1" size={1}>
+
+            <PaneChild hook='P1' />
+          </Pane>
+        </ResizableComponentCustomPanesTestWrapper>
+      )
+      cy.wait(50)
+      rCy.cyGet(textAreaP1)
+        .type('text test')
+        .should('have.value', 'text test')
+    })
+  })
 })
diff --git a/packages/resizable-panes-react/cypress/unit-testing/utils/dom.cy.tsx b/packages/resizable-panes-react/cypress/unit-testing/utils/dom.cy.tsx
@@ -1,12 +1,9 @@
-import {SinonSpy} from 'cypress/types/sinon'
 import {getResizableEvent} from '../../../../resizable-core'
 
 describe('Dom utils', () => {
   describe('It should test getResizableEvent for Touch evevts', () => {
-    let preventDefault: SinonSpy
     const event = {
       type: 'touch',
-      preventDefault,
       targetTouches: [{
         clientX: 10,
         pageX: 10,
@@ -16,28 +13,22 @@ describe('Dom utils', () => {
     }
 
     beforeEach(() => {
-      preventDefault = cy.spy()
-      event.preventDefault = preventDefault
+
     })
 
     afterEach(() => {
 
     })
 
-    it('should test getResizableEvent vertical panes ', () => {
+    it.only('should test getResizableEvent vertical panes ', () => {
       const retValue = [10, 10]
-
       const value = getResizableEvent(event, true, {})
-      expect(preventDefault.calledOnce).to.equal(true)
-
       expect(value).to.deep.equals(retValue)
     })
 
     it('should test getResizableEvent Horizontal panes ', () => {
       const retValue = [20, 20]
       const value = getResizableEvent(event, false, {})
-      expect(preventDefault.calledOnce).to.equal(true)
-
       expect(value).to.deep.equals(retValue)
     })
   })