RangeSelector.Button error

[ben-lucidfusion]

The RangeSelector.Button component doesn't seem to be working properly. You can actually see an example of the JS error in your demo:

https://whawker.github.io/react-jsx-highcharts/examples/Highstocks/index.html

If you include any kind of RangeSelector.Button in your code like this:

<RangeSelector>
    <RangeSelector.Button></RangeSelector.Button>
</<RangeSelector>

You'll end up with this error:

Uncaught TypeError: Cannot read property 'state' of undefined
    at https://code.highcharts.com/stock/highstock.js:484:470
    at Array.forEach (<anonymous>)
    at a.each (https://code.highcharts.com/stock/highstock.js:28:325)
    at E.updateButtonStates (https://code.highcharts.com/stock/highstock.js:484:70)
    at E.render (https://code.highcharts.com/stock/highstock.js:492:442)
    at a.Chart.<anonymous> (https://code.highcharts.com/stock/highstock.js:499:481)
    at a.Chart.a.(anonymous function) (https://code.highcharts.com/stock/highstock.js:19:186)
    at a.Chart.<anonymous> (https://code.highcharts.com/stock/highstock.js:517:137)
    at a.Chart.a.(anonymous function) [as update] (https://code.highcharts.com/stock/highstock.js:19:186)
    at https://unpkg.com/react-jsx-highstock@1.3.4/dist/react-jsx-highstock.min.js:1:11143

My "fix" for the time being is to just pass the buttons in like this:

<RangeSelector buttons={myArrayOfButtonsHere}></<RangeSelector>

[whawker]

I think the error on the demo page is because the example pulls in Highstock 6.0 from the CDN (due to an oversight), which is a version I haven't officially supported yet.

There may still be a different issue with range selector buttons with Highstock 5.0.x though, I'll take a look.

Which version of Highstock are you seeing this error with?

[ben-lucidfusion]

First, I just wanted to say thank you for the amazingly fast response and AWESOME project you have created here. :)

I just did

npm install highcharts --save
npm install highstock-release --save

when I started my project a few days ago not thinking about versions, and it looks like I got 6.0.1. That would certainly explain the issue.

[whawker]

No worries, that's what it said in the readme after all! (I've corrected that now). Glad you like the project!

[whawker]

So does switching to Highcharts 5.x.x fix the issue? Can I close this?

[ben-lucidfusion]

I haven't had a chance to check yet, sorry. :( Once I implemented my work around with the button array via a prop, I just moved on. I will let you know as soon as I can.

[marcelobaez]

I can't focus (click inside) neither on the examples or my own project's RangeSelector.Input. After some try and failure i figured out that it is possible to click right only in the edges of the inputs, but not on other areas

[whawker]

@marcelobaez that issue with RangeSelector.Inputs should be fixed now, the fix was released in 2.0.2 (or 1.4.2, if you're using the previous version)

[whawker]

Confident this was fixed in 46a9666.

[RIKIL]

For me, this issue is still a problem. We have a set of dates on our chart as seen in the link in the OP. I can click on the field with a date and see my cursor in the field but I can't change anything and the calendar doesn't come up either.

Here is my entire RangeSelector code:
<RangeSelector

                inputDateParser={this.parseDate}
                inputStyle={{
                  background: "f5d000",
                  color: "#ccc",
                  fontWeight: "bold"
                }}
              >
                <RangeSelector.Button count={60} type="minute">
                  1h
                </RangeSelector.Button>
                <RangeSelector.Button count={1} type="day">
                  1d
                </RangeSelector.Button>
                <RangeSelector.Button count={1} type="week">
                  1w
                </RangeSelector.Button>
                <RangeSelector.Button count={1} type="month">
                  1m
                </RangeSelector.Button>
                <RangeSelector.Button type="all">All</RangeSelector.Button>
                <RangeSelector.Input boxBorderColor="f5d000" />
                selected={1}
              </RangeSelector>