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.

Sign up for GitHub

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

fix(Checkbox): prevent click propagation from the input element #3435

Merged
merged 10 commits into from
Feb 21, 2019
Merged

fix(Checkbox): prevent click propagation from the input element #3435

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8b6c4a8
fix(Checkbox): Prevents click propagation from the input (#3433)
Fabianopb Feb 13, 2019
8f02615
fix(Checkbox) Create tests for click on input and label with and with…
Fabianopb Feb 13, 2019
eca6f52
fix(Checkbox): Create handler for input click (#3433)
Fabianopb Feb 14, 2019
d73360b
fix(Checkbox): Improve tests readability (#3433)
Fabianopb Feb 14, 2019
52b8f47
Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…
layershifter Feb 19, 2019
f4242e9
updates
layershifter Feb 19, 2019
5837fc3
updates
layershifter Feb 19, 2019
58d8a93
improve coverage
layershifter Feb 19, 2019
a7d98a3
Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…
layershifter Feb 21, 2019
96211aa
remove target
layershifter Feb 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/modules/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@ export default class Checkbox extends Component {
tabIndex={this.computeTabIndex()}
type={type}
value={value}
onClick={e => e.stopPropagation()}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we create a handleInputClick method and make a comment there with a link to the matching issue?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And sort props in alphabetic order ❤️

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

/>
{/*
Heads Up!
Expand Down
44 changes: 44 additions & 0 deletions test/specs/modules/Checkbox/Checkbox-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,50 @@ describe('Checkbox', () => {
})
})

describe('click propagation', () => {
const assertions = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const assertions = [
const assertMatrix= [

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll change that

{
description: 'propagates once on "label" without "id"',
id: undefined,
target: 'label',
propagates: true,
},
{
description: 'does not propagate on "input" without "id"',
id: undefined,
target: 'input',
propagates: false,
},
{
description: 'propagates once on "label" with "id"',
id: 'foo',
target: 'label',
propagates: true,
},
{
description: 'does not propagate on "input" with "id"',
id: 'foo',
target: 'input',
propagates: false,
},
]

assertions.forEach((assertion) => {
it(assertion.description, () => {
const onClick = sandbox.spy()
wrapperMount(
<div role='presentation' onClick={onClick}>
<Checkbox id={assertion.id} />
</div>,
)
const target = document.querySelector(`.ui.checkbox ${assertion.target}`)
domEvent.click(target)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

-const target = document.querySelector(`.ui.checkbox ${assertion.target}`)
-domEvent.click(target)
+domEvent.click(`.ui.checkbox ${assertion.target}`)

This should be a valid change 😺

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know!

if (assertion.propagates) onClick.should.have.been.calledOnce()
else onClick.should.not.have.been.called()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

-if (assertion.propagates) onClick.should.have.been.calledOnce()
-else onClick.should.not.have.been.called()
+onClick.should.have.callCount(Number(assertion.propagates))

We can test the call count directly, https://github.com/domenic/sinon-chai

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea!

})
})
})

describe('label', () => {
it('adds the "fitted" class when not present', () => {
shallow(<Checkbox name='firstName' />).should.have.className('fitted')
Expand Down