The toggle should be rendered as inline-block instead of block

[lzl124631x]

Environment Information

• Package version(s): https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle
• Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

Actual behavior:

In the above screenshot, the red lines are clickable and will toggle the toggle, which is unexpected and inconsistent because the green lines are not clickable.

Accidentally clicking on those red lines causing unexpected toggling is very annoying.

Expected behavior:

only these green areas should be clickable

Priorities and help requested:

Are you willing to submit a PR to fix? YES

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[lzl124631x]

ping

[paulgildea]

@xugao Do you think making this fix will break existing customers?

If @xugao confirms that this is a safe fix @lzl124631x feel free to submit a PR

[xugao]

@lzl124631x - i believe the right fix should be to preventDefault on Label click:

fluentui/packages/office-ui-fabric-react/src/components/Toggle/Toggle.base.tsx

Line 154 in 785bb93

<Label htmlFor={this._id} className={classNames.label} id={labelId}>

So we need to add onClick on this line and add ev.preventDefault logic

[qianghuang1]

What's the ETA for this bug?

[zeedomD]

Any updates on this issue? Thanks.

[xugao]

@qianghuang94 , @zeedomD - sorry for the delay. I will take a look at this

[msft-fluent-ui-bot]

🎉This issue was addressed in #16195, which has now been successfully released as @fluentui/react-toggle@v1.0.0-beta.31.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉This issue was addressed in #16500, which has now been successfully released as office-ui-fabric-react@v7.156.0.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[msft-fluent-ui-bot]

🎉This issue was addressed in #16500, which has now been successfully released as @fluentui/react-examples@v0.11.10.:tada:

Handy links:

• Release Notes
• Official NPM Release