Cannot click on element inside draggable after initial selection in Edge and Firefox

[ant-g]

Example of issue:
https://codesandbox.io/s/eager-rgb-guk15

This will work correctly in Chrome, but fail in Edge and Firefox.

Click into an input field, and then try to click again to move the cursor to a different position.

Input field does not receive/respond to the click, cannot select the text, but can drag the element.

Input field should receive/respond to the click after the initial selection in all browsers, allow for moving the cursor and selecting all with double click (as is possible in Chrome).

This may not be a vuedraggable problem, but without understanding how it's working under the covers, can't tell if focus is being controlled by vuedraggable or if this a browser problem?

[David-Desmaisons]

Hello @ant-g all events handling is done by sortable.js. vue.draggable is "only" a wrapper to synchronize with vue data.
Please check sortabe.js for similar issue or create a new one there.

[ant-g]

This has now been fixed by sortable.js
SortableJS/Sortable#972

But the vuedraggable needs a way of enabling the fix, i.e. setting

  filter: 'input',
  preventOnFilter: false,

When creating the sortable

https://jsbin.com/tediyivoko/edit?html,css,js,output

Unless this is handled via componentData ?

[pierrewtLanca]

I've tried using these as attributes of the Draggable component. They do something, but not what I want: they just disable totally the cursor, it's even not clickable anymore.
In our scenario, it's only the first input field that cannot be clicked properly. It then triggers the disabling of the Draggable (as we wanted to) and until it's not enabled again, the click on other input slots work totally fine.

[ant-g]

These atrributes solve the problem based on the jsbin script I've referenced above (in firefox where the problem seems to exist), you might want to compare that to your code?

[pierrewtLanca]

Hi, here is what I did (on Firefox):

1. tried https://jsbin.com/tediyivoko/edit?html,css,js,output --> the click in the input works fine, the cursor is shown where the mouse click is done
2. tried to apply the 2 attributes (filter and preventOnFitler) in my project --> no cursor is shown at all
3. in my project without the 2 attributes aforementioned --> cursor always appear at the end of the input field no matter where in the input field I click.

Here is a simple App.vue that illustrates my project (with the attributes for point 2.) and the problem with text cursor.
For testing point 3., simply remove filter= "input" preventOnFilter= "false"
Thanks for your help again :)

<template>
    <div id="app">
        <Draggable v-model="mockVals" animation= "200" filter= "input" preventOnFilter= "false">
            <input v-for="val in mockVals" :key="'nameEntry_'+val" :value="val"/>
        </Draggable>
    </div>
</template>

<script lang="ts">
import Vue from "vue"
import Draggable from "vuedraggable";

export default Vue.extend({
    name: "App",
    components: {
        Draggable,
    },
    data() {
        return {
            mockVals: ["abcd","efgh","ijklm"],
        };
    },
});
</script>

<style>
#app {
margin-top: 60px;
}

input {
    display: block;
    margin-left: 60px;
}
</style>

[ant-g]

So I think you need to set these via componentData() https://github.com/SortableJS/Vue.Draggable#componentdata
I haven't got time to try this myself right now, but I think you need:

:component-data="{ attrs : {  filter: "input", preventOnFilter: false } }"

on the Draggable.

If this doesn't work then it requires a change to vue-draggable and hence re-opening of this issue.

[pierrewtLanca]

Hi,

Thanks again. it didn't work (I think that would set properties to something inside Draggable that needs to be tagged).

However, reading the page you sent I realised I made a mistake in the code for adding attributes in the Draggable component.
This worked as expected (for the cursor to be shown where the user clicks) on Firefox:
<Draggable v-model="mockVals" animation= "200" filter= "input" :preventOnFilter= "false">
the ":" in front of preventOnFitler is important (that's what I forgot) because otherwise the value is not passed as a JS boolean...

[IAmShafqatAli]

I have a sortable table which has all possible type of question (single choice, multi choice, text type, file type) I was also having the same issue that whatever was written inside a textarea I cannot choose it.
So I apply a small fix which is as follows:
handle=".dragger"
I added one call with name dragger and that call is applied to all td where I will like to give dradd fucntionality.

for example
In image below the red boxes shows the element from where only dragging is possible. Now If I try to drag from area other than these boxes will not let me drag and also it enables me to select the text inside the box.

[timkerr222]

I have a sortable table which has all possible type of question (single choice, multi choice, text type, file type) I was also having the same issue that whatever was written inside a textarea I cannot choose it. So I apply a small fix which is as follows: handle=".dragger" I added one call with name dragger and that call is applied to all td where I will like to give dradd fucntionality.

for example In image below the red boxes shows the element from where only dragging is possible. Now If I try to drag from area other than these boxes will not let me drag and also it enables me to select the text inside the box.

This works for vue components.