#1034·radium

:active style getting stuck - mouse_up_listener error showing in console

Author: dancherbCreated Dec 4, 2019Updated Jan 22, 2020

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:

bash

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",