bug: child input element is receiving un-wanted props

[mad-raccoon]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.17.1

Current Behavior

Whenever the user interacts with an input element inside the component, that input element inherits un-wanted props from the stencil component element.

I am using the component like this:

<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

That is defined like this:

Problem

Whenever I interact with the input, the props first="Stencil" last="'Don't call me a framework' JS" are getting passed to the input element:

Here is a sandbox with the issue: Sandbox

Expected Behavior

Not pass the properties to the input element

System Info

No response

Steps to Reproduce

Click on the input element.

Code Reproduction URL

https://codesandbox.io/p/devbox/crimson-breeze-kd5g4r?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvgkimok00073b6q5znuvqxq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvgkimok00023b6qijh57yjk%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvgkimok00043b6qlai19bph%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvgkimok00063b6q2q3c8qal%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B90%252C10%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvgkimok00023b6qijh57yjk%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvgkimok00013b6qsidebo4f%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvgkkeu0004p3b6q3g1x4td5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A32%252C%2522startColumn%2522%253A52%252C%2522endLineNumber%2522%253A32%252C%2522endColumn%2522%253A52%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252Fmy-component%252Fmy-component.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvgl748i00023b6j2dan8n71%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvgkimok00023b6qijh57yjk%2522%252C%2522activeTabId%2522%253A%2522clvgl748i00023b6j2dan8n71%2522%257D%252C%2522clvgkimok00063b6q2q3c8qal%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvgkimok00053b6qdbz3vikl%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3333%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvgkimok00063b6q2q3c8qal%2522%252C%2522activeTabId%2522%253A%2522clvgkimok00053b6qdbz3vikl%2522%257D%252C%2522clvgkimok00043b6qlai19bph%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvgkimok00033b6q5qm0s7xt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clvgkimok00043b6qlai19bph%2522%252C%2522activeTabId%2522%253A%2522clvgkimok00033b6q5qm0s7xt%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A28.908701854493586%257D

Additional Information

No response

[tanner-reits]

@mad-raccoon I wasn't able to reproduce what you're describing either locally or in the provided sandbox. Are there specific steps that cause this behavior?

[mad-raccoon]

@tanner-reits I updated the sandbox.

Here is a screen recording of the behavior I described. Notice that at the beginning the input element has no props, and after I click on it, it gets the properties first and last

https://github.com/ionic-team/stencil/assets/57071299/5aa048bf-d3dc-4da8-955d-6360f16a2726

[mad-raccoon]

@tanner-reits after some investigation, i discovered that this only happens with google chrome

[tanner-reits]

@mad-raccoon Yeah I'm not able to get that to happen on my end. Looks like you have chrome update in the video you sent, does it still happen if you update to the latest version?

[mad-raccoon]

@tanner-reits I have it updated. I am using this one:

Chrome is up-to-date Version 124.0.6367.119 (Official Build) (arm64)

[tanner-reits]

@mad-raccoon Both myself and @rwaskiewicz are unable to reproduce this issue. Do you have any browser extensions installed that might be playing a role? I'm on the same Chrome version you reported, so, it seems this is an issue specific to your machine.

[mad-raccoon]

@tanner-reits how are you trying to replicate this issue? Local or via the playground I shared ?

Also, are you using Mac or Windows ? I am on Mac

[tanner-reits]

@mad-raccoon I'm on a mac. I've tried to reproduce both locally and in the playground.

[christian-bromann]

@mad-raccoon maybe one way to create a reproducible example is to adjust Stencils e2e tests and make them fail based on your observations. Please raise a PR for this and we can take a look.

[ionitron-bot[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 reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

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

[mhoritani]

Hi @mad-raccoon! This might be a long shot, but is there a chance you are using LastPass, specifically its browser extension? We recently had a similar case and found that this extension happens to do exactly, that causing issues with our components.

You could try to see if this still happens using Chrome's Incognito mode where extensions are disabled.

[mad-raccoon]

hey @mhoritani. sorry for the late reply... i can confirm . this is related to LastPass extension.

Do you have any workaround to avoid this ? I created a function that cleans the extra props, but it has some flaws.

[christian-bromann]

I will go ahead and close this since this doesn't seem to be related to Stencil directly. Thanks you @mhoritani for this excellent guess 🎉

[mad-raccoon]

@christian-bromann @mhoritani

is there any workaround to avoid this behavior with lastpass ?