I have an issue with react-draggable library, when on mobile or tablet devices onClick from children are not propagated. Anyone knows which might be the reason?
<Draggable onStart={handleDragStart} onDrag={handleDrag} onStop={handleDragStop}>
<div
className={!cartWidgetCollapsed ? styles.widgetContainer : styles.widgetContainerCollapsed}>
<div style={{ width: '100%', height: '100%', pointerEvents: isDragging ? 'none' : 'auto' }}>
{cartWidgetCollapsed ? (
<div className={styles.widgetCartContainerCollapsed} onClick={toggleOpenCart}>
<CartIcon disabled={isDragging} />
<div className={styles.widgetTogglerExpanded} onClick={toggleCollapse}>
<img draggable={false} src={expand} alt={ALT_CONSTANTS.ACTION_ICON} />
</div>
</div>
) : (
<>
<div className={styles.widgetTogglerCollapsed} onClick={toggleCollapse}>
<img draggable={false} src={collapse} alt={ALT_CONSTANTS.ACTION_ICON} />
</div>
<div
className={styles.widgetCartContainer}
{...(!isDragging && { onClick: toggleOpenCart })}>
<SuffixSelect
disabled={isDragging}
isLoading={isFetchingSites}
icon={locationPin}
dropdownStyle={{ visibility: isDragging ? 'hidden' : 'initial' }}
listOptions={sites}
value={selectedSite?.code}
onChange={changeSiteHandler}
customStyles={{
borderRadius: '12px',
marginBottom: '7px',
overflow: 'hidden',
borderColor: 'var(--primary-100)',
backgroundColor: 'var(--primary-100)',
pointerEvents: isDragging ? 'none' : 'auto',
}}
/>
<div className={styles.widgetAmount}>
<p>{UtilService.numberToDollar(cartAmount)}</p>
<p className={styles.widgetCart}>
<Icon isEmbedded disabled={isDragging} />
<span>{'Click ->'}</span>
</p>
</div>
</div>
</>
)}
</div>
</div>
</Draggable>
From the code you can see onClick={toggleOpenCart}
and onClick={toggleCollapse}
. Both are propagated only on PCs.