Radium: :active style getting stuck - mouse_up_listener error showing in console

Created on 4 Dec 2019  路  2Comments  路  Source: FormidableLabs/radium

The style given for ":active" persists, even after releasing the mouse. The console shows the below error.

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at resolve-interaction-styles-plugin.js:85
    at mouse-up-listener.js:6
    at Array.forEach (<anonymous>)
    at _handleMouseUp (mouse-up-listener.js:5)

Demo component:

import React, { Component } from 'react';
import Radium from 'radium';

class Checkbox extends Component {
    render() {
        return(
            <div 
                style={{
                    backgroundColor: "red",
                    height: 30,
                    width: 30,
                    opacity: 1,
                    ":active": {
                        opacity: 0.6,
                    }
                }}
            />
        )
    }
}

export default Radium(Checkbox)

Versions:

"react": "^16.12.0",
"radium": "^0.26.0",

Most helpful comment

I tried that Demo component, I wasn't able to make it fail, however when I converted it to a functional component I saw the error thereafter.

All 2 comments

I tried that Demo component, I wasn't able to make it fail, however when I converted it to a functional component I saw the error thereafter.

Taking a look now -- we've encountered the same issue

Was this page helpful?
0 / 5 - 0 ratings

Related issues

exogen picture exogen  路  7Comments

alphiii picture alphiii  路  4Comments

MylesBorins picture MylesBorins  路  8Comments

pocketjoso picture pocketjoso  路  8Comments

dyguan372 picture dyguan372  路  5Comments