bug: ion-img should accept draggable prop

[magoarcano]

This basic functionality of html should work as <img draggable="false> so we can disable the default drag option for

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[magoarcano]

It's simple to reproduce.
I don't mean about Drag and Drop functionality. I mean that by default <img> types are draggable: (i.e. you can try to drag the avatar image in this page and you will see a shadowed copy of the image)

I made an app where the user can drag and rotate markers on an image. The experience is annoying if the image is draggable. With normal <img> tags works great. But <ion-img> doesn't work as expected.

I made demo here: https://stackblitz.com/edit/ionic-pnlxgp?file=pages%2Fhome%2Fhome.html
Steps for reproduce:
Draggable, OK:
<img src= "https://hackernoon.com/hn-images/1*nlhD6_U277a1s_VxSbH11g.jpeg">
Not Dragable: OK
<img src= "https://hackernoon.com/hn-images/1*nlhD6_U277a1s_VxSbH11g.jpeg" draggable="false">
Should not be draggable, but it is.
<img src= "https://hackernoon.com/hn-images/1*nlhD6_U277a1s_VxSbH11g.jpeg" draggable="false">

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[cerkiner]

The problem is that the browser defaults to true for <img> tag's draggable. When rendered draggable={false} in stenciljs, it won't pass draggable attribute because it evaluates the absence of an attribute as same as false. Then browser defaults to draggable="true" causing an unwanted result.

EDIT;
Unfortunately, the type of img.draggable attribute is boolean.
(JSX attribute) JSXBase.HTMLAttributes.draggable?: boolean | undefined

[cerkiner]

The problem is that the browser defaults to true for <img> tag's draggable. When rendered draggable={false} in stenciljs, it won't pass draggable attribute because it evaluates the absence of an attribute as same as false. Then browser defaults to draggable="true" causing an unwanted result.

EDIT;
Unfortunately, the type of img.draggable attribute is boolean.
(JSX attribute) JSXBase.HTMLAttributes.draggable?: boolean | undefined

@liamdebeasi issue mentioned here; stenciljs/core#2484

[simonhaenisch]

@liamdebeasi I submitted a fix for this in Stencil. So after this is out and upgrading, you'll just need to pass the draggable attribute on to the actual image tag here

https://github.com/ionic-team/ionic/blob/c7e94a1f2377bd578dd748038196453975109c20/core/src/components/img/img.tsx#L99-L106

like so:

<img
  // ....
  draggable={this.el.getAttribute('draggable') || undefined}
/>

(getAttribute returns null if the attribute isn't defined)