모바일에서 @click 이벤트 발생안함

Chloe-Bang commented 1 year ago

Environments

Framework name: vue3
Framework version: ^3.2.38
Component name: vue3-selecto
Component version: ^1.8.2

Description

리스트 페이지에 체크 선택 버튼 대신 vue3-selecto로 선택 기능을 대신하고 리스트 아이템 하나를 클릭하면 라우터 이동을 하는 코드 작성 중, userAgent가 모바일 디바이스면 드래그 지정 영역 하위의 이벤트가 모두 동작하지 않는 걸 확인했습니다.

PC에서 동작하는 것과 동일하게 모바일에서도 동작되도록 수정 부탁드립니다. 동일한 코드는 아니지만 이해를 위해 같은 계층으로 만든 샘플 코드 첨부합니다.

PC:

dragContainer로 지정한 태그 안에 있는 @click="testClick" 이벤트 발생 > 정상 동작

PC 개발자 콘솔(모바일 디바이스 iPhoneX, iPad Mini..) :

@click="testClick" 이벤트 발생 안함 > 오동작

모바일(아이폰) :

@click="testClick" 이벤트 발생 안함 > 오동작 (개발자 콘솔과 같음)
body의 스크롤도 selecto로 지정한 영역 안에서는 동작안함
table의 좌우 스크롤 동작 안함

Sample Source

<vue-selecto 
  dragContainer='.drag-container'
  :selectableTargets='[".draggable-area .test-td"]'
/>
<table class='drag-container draggable-area'>
...//
  <tbody>
     <tr @click="testClick">
         <td class='test-id'></td>
      </tr>
   </tbody>
</table>

daybrush commented 1 year ago

@Chloe-Bang

vue3-selecto 1.8.3 버전으로 업데이트 했습니다. touchstart 때 preventDefault를 발생시키지 않는 방향으로 수정했습니다. 확인해보시길 바랍니다.

Chloe-Bang commented 1 year ago

감사합니다 :)

ehd1120gus commented 8 months ago

안녕하세요. 우선 좋은 라이브러리 만들어주셔서 감사합니다.

Framework name: react Framework version: ^18 Component name: react-selecto Component version: ^1.26.1

이 이슈와 마찬가지로, react에서도 ios에서 drag는 정상적으로 작동하지만 touch (click) 이벤트가 정상적으로 작동하지 않는 것으로 보입니다. 더블 탭 하면 select가 되는 것으로 보이는데, 확인 부탁드려도 될까요?

감사합니다.

<Selecto
  className="selecto-selection"
  dragContainer={".elements"}
  selectableTargets={[".selecto-area .cube"]}
  hitRate={0}
  selectByClick={true}
  selectFromInside={true}
  continueSelect={true}
  ratio={0}
  onSelect={(e) => {
    e.added.forEach((el) => {
      el.classList.add("selected");
    });
    e.removed.forEach((el) => {
      el.classList.remove("selected");
    });
  }}
></Selecto>

daybrush commented 8 months ago

@ehd1120gus

안녕하세요. 1.26.2 버전을 배포했습니다.

아마도 클릭 이벤트가 동작하는 것으로 보이는데 확인해보실래요?

https://codesandbox.io/p/sandbox/competent-ben-fhrrwv?file=%2Fpackage.json%3A1%2C1-41%2C2

ehd1120gus commented 8 months ago

Click Event Issue (Complete)

react-selecto 1.26.2에서 클릭 이벤트 정상적으로 작동합니다! 빠른 업데이트 감사합니다.

Typescript Import Issue

업데이트된 모듈 임포트 관련해서 다음 오류가 발생합니다.

codesandbox.io 기준으로 아래와 같습니다.

Could not find a declaration file for module 'react-selecto'. '/nodebox/node_modules/.store/react-selecto@1.26.2/node_modules/react-selecto/dist/selecto.cjs.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-selecto if it exists or add a new declaration (.d.ts) file containing declare module 'react-selecto';

@types/react-selecto index.d.ts 만들어서 해결한 상태인데, 혹시 해서 남깁니다!

감사합니다 :)

daybrush commented 8 months ago

@ehd1120gus

안녕하세요. 확인해보니 files 필드 문제로 declaration이 누락되고 있었습니다. 1.26.3 버전으로 배포했습니다. 확인해보시길 바랍니다.

ehd1120gus commented 8 months ago

감사합니다!

daybrush / selecto