Blueprint: data-* attributes being stripped from certain comopnents

[tnrich]

Right now, passing a data attribute to many blueprint components isn't supported. For example:

<FormGroup data-test="some-unique-testing-id" ... />

will not result in a div in the dom with a data-test attribute.

I think that data-attibutes should be able to be most blueprint components. I don't have an exhaustive list of the components. Here is a sandbox I started to test which components do pass data attributes.

https://codesandbox.io/s/1vo78vp5mq

[giladgray]

@tnrich this would only be possible 1) on components that spread all props to a DOM element (which many do not) and 2) if React.HTMLProps allowed arbitrary keys, which it does not.

not really sure how best to solve this issue. not sure there's even a good clean general solution, as supporting data-* attributes essentially amounts to supporting _any_ prop and kinda kills any type safety.

[giladgray]

@tnrich do you have an example of a component that _does_ support data-* attributes _in TypeScript_?

[tnrich]

No @giladgray I don't have an example but I also haven't dabbled much in using typescript myself. I do know that React allows you to pass data-* elements to any dom component: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#data-and-aria-attributes

[warpdesign]

I second to this. I'm writing integration tests for my app, so to avoid using classes/ids, I wanted to use html5 attributes, like:

<Button data-cy-submit></Button>

And then use something like:

cy.get('[data-cy-submit]')...

Problem is there doesn't seem to be a way to add custom data- props to most Blueprint components.

I understand why it's currently technically not supported but I think some workaround is really needed.

[warpdesign]

@giladgray the <Button> and <InputGroup> components do support data-* attributes in TypeScript it seems.

[clintharris]

I also arrived here after wanting to use data-* attributes so that my (Cypress) integration tests could use selectors that are less prone to CSS class changes. A couple of work-arounds that might be helpful:

1. Use the HTML/CSS version of the component instead of the JavaScript one (if possible) so that you can specify the data-* attribute. For example, <ul className={Classes.MENU} data-cy-foo> instead of <Menu>.
2. Use a classname that is purely for identification and not for styling (e.g., <div className="{...} cy-submit">).

[bindhyeswari]

@giladgray @warpdesign data-* attributes are supported for elements in JS as well.

<Button
          data-prop={propName}
          onClick={this.handleSortSelect}
          intent={hasOrder ? Intent.WARNING : null}
          icon={hasOrder && asc ? 'sort-asc' : 'sort-desc'}
          minimal={true}/>

<button type="button" data-prop="tourCode" class="bp3-button bp3-minimal"> ...

[justinbhopper]

@giladgray Typescript ignores props if they are not valid JS identifiers, so attribute type checking does not error on properties with hyphens (e.g. data-foo).

I think the fix here is to add a filter to removeNonHTMLProps if the property contains a hyphen:
https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/props.ts#L147

https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking

[giladgray]

@justinbhopper that's a great solution suggestion. if you're up for it, a PR would be most welcome.

sadly, my active involvement in Blueprint ended last year, so i'll forward your tag to @adidahiya 👋

[adidahiya]

Agreed, @justinbhopper's proposal would be welcome as a PR