fix: selection issue in table row while editing

[Kartik18g]

Fixes 9505

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Deployment: https://tooljet-pr-9725.onrender.com
Dashboard: https://dashboard.render.com/web/srv-cp7fhnn79t8c73bo0m70

[Kartik18g]

Selecto hijacks the selection event of browser by overriding it, which was preventing selection within a table cell.

 dragCondition={(e) => {
        // clear browser selection on drag
        const selection = window.getSelection();
        if (selection) {
          selection.removeAllRanges();
        }
        const target = e.inputEvent.target;
        if (target.getAttribute('id') === 'real-canvas') {
          return true;
        }
        // if clicked on a component, select it and return false to prevent drag
        if (target.closest('.react-draggable')) {
          const closest = target.closest('.react-draggable');
          const id = closest.getAttribute('widgetid');
          const component = appDefinition.pages[currentPageId].components[id].component;
          const isMultiSelect = e.inputEvent.shiftKey;
          setSelectedComponent(id, component, isMultiSelect);
        }
        return false;
      }}
  

the drag condition prop allows us to control selecto's behaviour, now selecto only works if a user starts selecting from outside of a container and not within it(Which allows us to select table cell). In order to allow selection of container when it is clicked, we manually select the container by setSelectedComponent instead of letting selecto select it.

[Kartik18g]

1.8 merge #9944