Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ToggleSwitch checked={true} disabled={true} not visible #986

Closed
2 tasks done
victorfunes opened this issue Sep 22, 2023 · 8 comments · Fixed by #987
Closed
2 tasks done

ToggleSwitch checked={true} disabled={true} not visible #986

victorfunes opened this issue Sep 22, 2023 · 8 comments · Fixed by #987
Labels
🐛 bug Something isn't working needs info Further information is requested

Comments

@victorfunes
Copy link

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Steps to reproduce

  1. Create a toggle switch and set checked={true} and disabled={true}

Current behavior

  • cheked and disabled
    image

  • not checked and disabled:
    image

Expected behavior

It should be visible showing its status as checked.

@rluders rluders added 🐛 bug Something isn't working confirmed This bug was confirmed labels Sep 23, 2023
rluders pushed a commit to rluders/flowbite-react that referenced this issue Sep 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyUp

BREAKING CHANGE: onKeyPress is deprecated. Please, use onKeyUp instead.

fix themesberg#986
rluders pushed a commit to rluders/flowbite-react that referenced this issue Sep 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyUp

fix themesberg#986
rluders pushed a commit to rluders/flowbite-react that referenced this issue Sep 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyDown

fix themesberg#986
rluders pushed a commit to rluders/flowbite-react that referenced this issue Sep 24, 2023
This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyDown

fix themesberg#986
rluders added a commit that referenced this issue Sep 24, 2023
…replacement (#987)

* docs: add disabled+active toggleswitch example

* fix(toggleswitch): fix state and replace onkeypress with onkeyup

This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyDown

fix #986

* fix(toggleswitch): remove unused event

* refactor(toggleswitch): remove dead code
@victorfunes
Copy link
Author

victorfunes commented Sep 25, 2023

@rluders I have downloaded and tested 0.6.1 and the behaviour is still the same: the component is almost not visible when disabled and checked.
In addition: could I ask to make optional the onChange callback property? Thank you!

@rluders
Copy link
Collaborator

rluders commented Sep 25, 2023

🤔 this is weird... If I changed it in the docs what I get is:

image

Code:

<ToggleSwitch checked={true} disabled={true} label="Toggle me (disabled & checked)" onChange={() => undefined} />

@rluders
Copy link
Collaborator

rluders commented Sep 25, 2023

In addition: could I ask to make optional the onChange callback property? Thank you!

Yes, you can... Open a new issue. :)

@rluders
Copy link
Collaborator

rluders commented Sep 25, 2023

@victorfunes are you using color="light" by any chance?

@victorfunes
Copy link
Author

I am using my own theme, but testing with other colors the behaviour is the same.

My theme:

  toggleSwitch: {
    toggle: {
      base: "toggle-bg h-6 w-11 rounded-full border group-focus:ring-4 group-focus:ring-primary-500/25",
      checked: {
        color: {
          primary: "bg-primary-600 border-primary-600",
        },
      },
    },
  }

My code:

          <ToggleSwitch
            id={id}
            label={""}
            color="primary"
            checked={checked}
            disabled={disabled}
            onChange={onChange ?? emptyDummyFunction}
          />

@victorfunes
Copy link
Author

victorfunes commented Sep 25, 2023

In addition: could I ask to make optional the onChange callback property? Thank you!

Yes, you can... Open a new issue. :)

It was #925 and it seems to be closed.
Could it be that changes were not commited to master to be included in v0.6.1? (Just to say a possibility because all is as the old component, and sounds strange) => I have just checked that I have installed the latest version to be sure

@rluders
Copy link
Collaborator

rluders commented Sep 25, 2023

I am using my own theme, but testing with other colors the behaviour is the same.

My theme:

  toggleSwitch: {
    toggle: {
      base: "toggle-bg h-6 w-11 rounded-full border group-focus:ring-4 group-focus:ring-primary-500/25",
      checked: {
        color: {
          primary: "bg-primary-600 border-primary-600",
        },
      },
    },
  }

My code:

          <ToggleSwitch
            id={id}
            label={""}
            color="primary"
            checked={checked}
            disabled={disabled}
            onChange={onChange ?? emptyDummyFunction}
          />

I'm trying to replicate this, but it still working for me. 🤔
Of course, I didn't use the Flowbite component to apply the theme, but used the ToggleSwitch's theme property to overwrite the style.

@rluders rluders reopened this Sep 25, 2023
@rluders
Copy link
Collaborator

rluders commented Sep 25, 2023

I'm reopening this one, just to remember that would be nice to have someone else testing it.

@rluders rluders added needs info Further information is requested and removed confirmed This bug was confirmed labels Sep 25, 2023
maman pushed a commit to transkripid/flowbite-react that referenced this issue Oct 7, 2023
…replacement (themesberg#987)

* docs: add disabled+active toggleswitch example

* fix(toggleswitch): fix state and replace onkeypress with onkeyup

This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyDown

fix themesberg#986

* fix(toggleswitch): remove unused event

* refactor(toggleswitch): remove dead code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working needs info Further information is requested
Projects
None yet
3 participants