Mousedown handler is blocking reset button (when max-height is set)

[MalcolmDwyer]

TLDR: Is there are recommended way to set a max-height of the control that doesn't have issues with focus handling?

I have multi-selects which can contain a large number values. In order to prevent the value field/search box from taking over the screen, I've added a max-height to the control.

.react-selectize .react-selectize-control {
  max-height: 200px;
  overflow-y: auto;
}

http://codepen.io/anon/pen/RpoKNm?editors=0110

This seems to work fine for the most part, but one problem I'm having is that the reset button doesn't work properly. When there are enough values to cause the search window to scroll, clicking the reset button just opens the dropdown (and sets the cursor at the end), I have to then scroll back up, and click again on the reset button to clear the field. I believe the mousedown handler that focuses the field triggers a scroll which then causes the reset button to be missed... or something like that.

Is there are recommended way to set a max-height of the control that doesn't have this problem?

Workarounds I've tried:

setting anchor={undefined} ... prevents the issue above because the mousedown handler no longer scrolls the [x] button out of view. This has the clunky items-are-added-in-reverse-order problem though, so it's a non-starter.

renderResetButton to override the [x] button with its own onMouseDown handler that clears the value. Finally... works but quite clunky.

        renderResetButton={() => {
          return (
            <svg
              className="react-selectize-reset-button"
              focusable={false}
              style={{
                width: 8,
                height: 8
              }}
              onMouseDown={ev => {
                this.handleValuesChange([]);
                ev.stopPropagation();
              }}
            >
              <path d="M0 0 L8 8 M8 0 L 0 8"></path>
            </svg>
          )
        }}