From Solving Bugs To Finding Them – And proposing a fix as well

The Open Source Journey – Continued

The “Outreachy Season” is here, and since I’m not an applicant, I wasn’t able to contribute to my favorite repository Taskcluster as much as I’d have liked, because all issues were now reserved for outreachy applicants.

“TOO BAD”, I thought to myself.

But that wasn’t going to stop me from contributing. So I went ahead and started finding bugs. That’s an even more advanced way of contributing, and I was sure that I could at least solve the bugs that I’m finding. So, that was an added motivation.

I started looking at CSS bugs, because those are usually the easiest to spot. It didn’t take me long to spot one. Eye of a Tiger, my friend Arjun always says to me. (Obviously, for a different context – and no, not the Rocky context).

The issue can be seen here: https://github.com/taskcluster/taskcluster/issues/1889

Form labels for check boxes might be misbehaving #1889

So, here’s the issue:

Describe the bug
For example, in taskcluster-ui.herokuapp.com/quickstart, clicking on checkboxes focuses the form label “This Task Should Run On” at irregular times.

Notice the form Label

And here’s the description:

Steps to reproduce the behavior:

  1. Go to taskcluster-ui.herokuapp.com/quickstart,
  2. Scroll down to ‘This Task Should Run On’
  3. Click on random checkboxes
  4. See error

Expected behavior
Form label doesn’t change focus like this for checkboxes.

Currently
Form label keeps changing irregularly.

Additional context
The same actually does happen for Material UI Checkboxes and their labels as well. (https://material-ui.com/components/checkboxes/)
However, a simple fix would be to add global CSS to not let the label become focused on selecting a checkbox.

What do you think @helfi92. I would like to make a PR for this if you think this is an issue!

Thanks!

Turns out, this is actually a (possible) issue with Material-UI. Something I contribute to as well.

So – I got to create this issue there as well.

Here it goes:

Form labels for check boxes might be misbehaving #18210

For example, in https://material-ui.com/components/checkboxes/ clicking on checkboxes focuses on the form label “Assign responsibility” at irregular times.

Notice the label for checkboxes
  • The issue is present in the latest release.
  •  I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Form label focus keeps changing irregularly.

Expected Behavior 🤔

Form label doesn’t change focus like this for checkboxes.

Steps to Reproduce 🕹

  1. Go to https://material-ui.com/components/checkboxes/
  2. Scroll down to ‘Checkboxes with FormGroup’
  3. Click on random checkboxes
  4. See error

Your Environment 🌎

Found while contributing to Taskclutster, Mozilla. Reproducible in Chrome with both Windows and Mac devices. Not reproduced in Mozilla Firefox.

Well, the issue is still under review, and I also have the possible solution prepared.

If it is accepted as something that needs to be corrected at Material UI, I will make a pull request there, otherwise, it will be rectified in Taskcluster anyways. So, more contribution incoming! ADRENALINE RUSH

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s