Bug: Selector input.-username does not match <input className="field -username" />

[mik01aj]

This element:

<input type="text" maxLength={32} value="" onChange={[Function]} placeholder="Dein Mitgliedsname" className="field -username" />

Is not matched by input.-username selector.

Btw, input.field.-username works, but the former should work too.

Using enzyme 2.3.0.

[ljharb]

Can you link to the spec that shows where class names can start with a hyphen?

[mik01aj]

The CSS 2.1 spec says just that it shouldn't start with hyphen followed by a digit, but it's not the case here. And class names starting with hyphens are recommended for component variants in RSCSS.

[mik01aj]

I really needed this so I looked for a workaround and... attribute matching seems broken too. I have a dialog box that contains this: (as reported by wrapper.debug())

<Button action={[Function]} icon="facebook" className="-facebook" variant="filled" disabled={false}>
  <button style={[undefined]} className="Button -filled -facebook" disabled={false} onClick={[Function]}>
    <CommonIcon icon="facebook" className="rightIcon" orientation="right">
      <span className="CommonIcon -facebook rightIcon" dangerouslySetInnerHTML={{...}} />
    </CommonIcon>
  </button>
</Button>

And I tried to match the button with various selectors. .-facebook matched the button and the span inside the icon, but none of these...

button.-facebook
.Button.-facebook
.Button.-filled.-facebook
button[className="Button -filled -facebook"]
button[class="Button -filled -facebook"]
[className="Button -filled -facebook"]
[class="Button -filled -facebook"]
[className="-facebook"]
[class="-facebook"]

...matched anything. Now this seems a pretty serious bug. 🐞

Tried one more way: wrapper.find('Button').filter({icon: 'facebook'}) also doesn't return anything. find returns 3 buttons, but filter rejects all of them for some reason. FWIW, wrapper.find('Button').filterWhere(e => e.prop('icon') === 'facebook') works.

P.S. If it's not clear yet, I use the mount API.

[ljharb]

Closed in #1086