responsively-app
responsively-app copied to clipboard
responsively-org
Checkboxes cannot be checked by clicking on their label
When opening a site with a checkbox that has a corresponding label tag, clicking on the label (not the checkbox) checks and instantly unchecks the checkbox.
Expected behavior: when clicking on the label, the checkbox should only switch state once.
Minimal HTML to reproduce (both don't work):
<html>
<body>
<input id="check" type="checkbox">
<label for="check">Click me</label>
<label>
<input type="checkbox">
Click me too
</label>
</body>
</html>
@jeyj0 can you please share the responsivelyapp version? the checkbox checks and unchecks as expected. I am using 0.4.0
I'm using 0.4.0, but I'm on NixOS - so that might be creating the issue. I'll try to reproduce on another machine when I get the time, but for now here's the nix expression I used to get responsively packaged on NixOS:
{ stdenv, fetchurl, appimageTools }:
let
inherit (appimageTools) wrapType2;
name = "responsively";
src = fetchurl {
url = "https://github.com/manojVivek/responsively-app/releases/download/v0.4.0/ResponsivelyApp-0.4.0.AppImage";
sha256 = "0n17hipkys3zhihpspll2bx40338fikq428i50bp5zip9gd1i1r7";
};
in
wrapType2 {
inherit name src;
extraInstallCommands = ''
mkdir -p $out/share/applications
echo "[Desktop Entry]
Encoding=UTF-8
Type=Application
Exec=responsively
Name=Responsively App
Version=0.4.0" > $out/share/applications/responsively.desktop
'';
}
Codesandbox for reproduction https://codesandbox.io/s/cranky-feynman-l5l48?file=/index.html
Open https://xr5xg.csb.app/ on responsively-app
The first checkbox works. The second one doesn't.
Tested on
Version: 0.7.0
Electron: 8.3.0
Chrome: 80.0.3987.165
Node.js: 12.13.0
V8: 8.0.426.27-electron.0
OS: Linux x64 4.15.0-107-generic
Version: 0.7.0 Electron: 8.3.0 Chrome: 80.0.3987.165 Node.js: 12.13.0 V8: 8.0.426.27-electron.0 OS: Windows_NT x64 10.0.18362
The issue I noticed is related to this "checkbox inside a label" pattern (to get it checked when clicking on checkbox, label or the space in between)
<label>
<input type="checkbox">
Click me too
</label>
But what I saw is that the check/uncheck action is not syncing correctly. I mean, when you click the checkbox on a device it works just fine but does not sync well with other devices. I think this is because the sync algorithm is sending two separated click events (one for the label and one for the input), so the result state of the checkbox is the same as the initial one. You can even sometimes see how the checkbox changes and then it changes again (happens fast), proving that there are two actions applied (in the gif below you can see it clearly near the end)
You can see it better here:
When you click in the checkbox it works fine because it is sending just one click event
Hello, May I know if anyone is working on this issue? If not I would like to work on this as this seems to be a good issue to start with this project as I am new here. I would be glad if I get assigned to this issue.
Thank you
Hello, May I know if anyone is working on this issue? If not I would like to work on this as this seems to be a good issue to start with this project as I am new here. I would be glad if I get assigned to this issue.
Thank you
Hi @GunjanRajTiwari thanks you for trying this, I am assigning this issue to you
Can i work on this?
Sorry @Arkadipta-Chatterjee I didn't see your request 😓, I already assigned this to @GunjanRajTiwari, please try another one 🙏🏻
Thank you for assigning me.
To keep track of the progress.
- [x] Read all the guidelines
- [x] Setup the Project
- [ ] Find the root cause of the issue
- [ ] Solve the issue
- [ ] Make a pull request
As I am quite new it may take some time and I am thankful for this opportunity.