I am attempting to install the DateTimePicker and the calendar and timepicker menus are not visible when their icons are clicked. Inspecting the html reveals that the div with classes rw-calendar-popup and rw-popup-container is set to visibility: hidden and height: 0px. Toggling the visibility and setting a height does reveal the calendar. I am using it with Bootstrap2 styles, could that be causing the issue?

At the moment the build creates a single react-widgets.css file under dist/css - which makes sense. If you want individual component styles, just build the LESS for that component.

However, we use SASS (and hopefully inline in the future) and don't particularly want to add another loader to our build. We also don't use all of the widgets (per application, maybe two or three), so it's a bit of a waste to ship the entire react-widgets.css.

What are your thoughts on having the react-widgets.css stylesheet, but also individual component stylesheets under dist/css as well?

Had to test this because we've run into it so many times in our own code :)

If you type 15.55 in a number picker:

And then hit backspace, when you hit backspace on 15.5, it'll pop from 15. to 15. This is because the parseInt of 15. is 15, and so it replaces the input.

My solution to this so far is to confirm that both string and numeric representations of the input are different before allowing the component to update, but there may be a cleverer solution.

http://jquense.github.io/react-widgets -- not working

I'd like to automate the .css creation process (create from my custom bootstrap theme & variables) and I need the .less files for that.

Running a accessibility tool, I got several violations using Date and Time Picker. They are the following:

Violation: Each form control must have associated text.
Inputs like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="Start Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">

Violation: The WAI-ARIA property identifier is not supported global property on element identifier that does not have a WAI-ARIA role.
Buttons like:
<button class="rw-btn" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.3.0.1.$month_2.1.$week_0.$day_0.0" type="button" disabled="" aria-disabled="true" aria-selected="false" tabindex="-1">01</button>

Violation: Elements having an aria-activedescendant property must also contain a tabindex attribute with a value greater than or equal to zero.
Tables like
`

Violation: A WAI-ARIA widget must have an accessible name (see message help text for details).
ul like:
<ul id="myID_time_listbox" class=" rw-list" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.2.0.0" role="listbox" step="30" max="Thu Dec 31 2099 00:00:00 GMT+0100 (CET)" min="Mon Jan 01 1900 00:00:00 GMT+0100 (WMT)" style="max-height:200px;height:auto;" aria-hidden="true">

Violation: Use the HTML5 attribute or the associated WAI-ARIA attribute (not both) on any one input element.
Elements like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="Start Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">

<button class="rw-btn" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.3.0.1.$month_2.1.$week_0.$day_4.0" type="button" disabled="" aria-disabled="true" aria-selected="false" tabindex="-1">05</button>

Potential violation: Elements that use 'role' must contain required child elements for the role.
Inputs like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="End Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">

Potential violation: WAI-ARIA widget elements must have a onkeydown or onkeypress event handler in order to be keyboard operable.
Elements like:
<ul id="myID_time_listbox" class=" rw-list" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.2.0.0" role="listbox" step="30" max="Thu Dec 31 2099 00:00:00 GMT+0100 (CET)" min="Mon Jan 01 1900 00:00:00 GMT+0100 (WMT)" style="max-height:200px;height:auto;" aria-hidden="true">

<tr data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.3.0.1.$month_2.1.$week_1" role="row">

Potential violation: Use header elements where appropriate.
<div id="myID" class="start-end-calendar rw-datetimepicker rw-widget rw-state-disabled rw-has-both" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3" tabindex="-1" aria-label="End Date" aria-required="false">

With the great job you did with accessibility in this library and the keyboard navigation, I think it is worth to check those issues, they don't seem really complicated.

Thank you!

Hi, I am using react-widgets in my project and I also happen to have automated policy tester tool in company I work for. Testing date picker control resulted in ~40 violations. So here it goes:

3 Each form control must have associated text.

• First is for input.rw-input in div.rw-widget.rw-datetimepicker
• Second and third is for button.rw-btn-left and button.rw-btn-right in div.rw-header in the popup.

35 The WAI-ARIA property aria-selected is not supported global property on element BUTTON that does not have a WAI-ARIA role.

• These are for buttons in table.rw-calendar-grid

1 The attribute aria-labeledby referenced by the element TABLE is not a valid WAI-ARIA State or Property.

• This one is for table.rw-calendar-grid I think author missed a second "l" in "labelledby".

1 Elements having an aria-active descendant property must also contain a tabindex attribute with a value greater than or equal 0

• This is also for table.rw-calendar-grid

1 A WAI-ARIA widget must have an accessible name

• This is also for table.rw-calendar-grid

And two potential violations:
2 Elements that use 'role' must contain required child elements for the role

• First one is for input.rw-input with role="combobox" for which a required child is a "listbox" or "textbox"
• Second one is for table.rw-calendar-grid with role="grid" for which a required child is "row"

The initial click doesn't do anything. if you manually clear the input and then select something and then use the clear X it works.

'/combobox'
'/dropdown-list'
'./datepicker' etc

Hey guys

I came across a problem in IE8 when I tried using the Combobox component. The code tries to modify CSS properties via the removeProperty method (see src/util/dom.js, method called css) which is not supported in IE 8 (see e.g. http://help.dottoro.com/ljopsjck.php).

This causes an exception that prevents the Combobox from closing.

Could you tweak the method to use something else in IE8? Based on a short search, removeAttribute method could work.

Hi, this looks like a great library and exactly what I need for my project. I'm using server side rendering and encountering an error in dom.js line 7: , el = document.createElement('div') because document doesn't exist. Has anyone tried using this library with server side rendering or know of a fix/workaround for this?

Thanks!

Hey again

I'm having a weird problem with the DatePicker that I can't quite pinpoint. Some of my unit tests keep failing with the React invariant violation: getDOMNode(): A component must be mounted to have a DOM node.
I tried to debug this as far as I could and it happens in ReplaceTransitionGroup's _tryFinish method, which tries to acquire the DOM node of an element that is unmounted. In general, I think the problem is that the animation can finish after the component has been unmounted, resulting in this error.

Do you think I'm doing something wrong? If not, would it be possible for the ReplaceTransitonGroup to check for the unmounted state prior to whatever it is trying to do with the DOM node?

As a side note, it seems like the DateTimePicker does not pass its duration property to the underlying Calendar component, which might be related to the issue I'm having (we always use 0 durations for animations), but it might not be the only problem.

Any help/suggestions would be most welcome.

http://jquense.github.io/react-widgets/docs/#selectlist
It is handy that you will highlight (gray background) an item when you mouse over it. However, you can not select/click unless you click the mouse directly over the name or button/box. The highlight in the blank area gives a false impression.
Fx35 (dev channel)

Thanks for your lib; I may use it soon!

v: 1.4.4

React has updated the way components are called. Using any widgets produces the warning: Warning: ComboBox is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory.

This is true for at least ComboBox, DropDownList, DateTimePicker, Calendar, ReplaceTransitionGroup, MonthView, NumberPicker, and Select.

I have been looking at adding it myself, but I thought I'd ask what you thought and if you have any directions on where to start?

Error: Cannot find module '../util/dom' from '/myproject/node_modules/react-widgets/lib/dropdowns'
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:42:25
at load (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:60:43)
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:66:22
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:21:47
at Object.oncomplete (fs.js:107:15)

any idea what I might be doing wrong?

Widgets should expose abilities to override or extend default functionality in the same way inputs do, through some sort of event system. Such a system should have an event object that is preventable. This would give the user the ability to interject their own behaviour when they need something different.

example is issue #20 where there should be an onSearch event where you can prevent the default, filter the data yourself and pass it back into the widget through props.

this is different from our normal callbacks b/c the user has the option to not handle it at all, unlike something like onChange where the consumer is required to handle the value or it doesn't change.

I'm new to React and needed a library of ui widgets. When it came time to add a Datepicker to my form I did:

<DateTimePicker name="toDate" format='yyyy-MM-dd' time={false} />

Now, the "name" attribute gets pass down to the rendered input but when I choose a new date from the datepicker, it does not update this input value.

Am I missing something? The reason I need this value is because I do a regular form submit of a form.

Hello! So I noticed this in the example page:

Looks quite bad to me... Why is not full width like the time picker? Moreover, number doesn't seem to be aligned. Also in FF there is that horizontal scrollbar. On the other hand, in Chrome there is no scrollbar but you cannot read it all.

Making some css changes:

  .rw-popup-container.rw-calendar-popup {
      //Remove right and width from here
  }

   //This is for align numbers to center inside the picker
  .rw-calendar-grid td .rw-btn {
    padding: 0;
  }
  .rw-calendar-grid .rw-btn {
    text-align: center;
  }

Then I get:

What do you think? I was trying to override the css but because I cannot remove the two properties from .rw-popup-container.rw-calendar-popup (only override them), I am not sure what values to put but I can't achieve the same effect I achieved when deleting them...

Working with the Combobox, it seems the only callback provided for a change in value is the onChange event.

The problem is that onChange is called with each progressive change in value, i.e. after every keypress. There's no information as to whether or not the value provided is intermediate or final.

There is an event that fires when the choice is final: onToggle. But onToggle only passes in the isOpen parameter, not the value of the widget.

Essentially what I'm looking for is some combination of onChange and onToggle. I would like a callback that fires on a new value when the widget closes.

Hello

I stumbled upon a bug in the datepicker's behavior:

1. Start with a datepicker with no value.
2. choose a date using the dropdown calendar.
3. immediately clear the value in the text input box (without leaving the text input).

From now on, the datepicker keeps displaying the value picked in 2) and the user cannot clear it (when I clear the text input, onChange does not get called).

Can be reproduced on the DOC page demos.

Thanks very much for putting this repo together. I'm using moment.js to format my datetimes, which are returned from the server in iso8601 format. Wondering if your time picker is TZ aware, or if I'll have to mutate the value to append the current user's TZ via moment. Cheers.

Suggestions aren't as good as they can be

• only makes one suggestion before assuming you want that one, can't type past the first suggestion without selecting it
• suggest and filter don't work at all together
• how should suggest work with filter when something like 'contains' or 'endsWith' or a custom filter is used, how do you set the caret?
• what is the proper rtl behavior ??

Widgets that allow filtering (combobox, select) only allow you to do custom filtering against the text field, passed in function args should be able to operate on the dataItem itself.

Widgets should also have the option to completely delegate out the filtering functionality to a parent component, perhaps with an onFilter event?

This is probably a documentation + my ignorance issue.

<head>
    <script src="http://fb.me/react-0.12.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
    <script src="react-widgets.js"></script>
</head>

Results in: Uncaught TypeError: Cannot read property 'createClass' of undefined. react-widgets:3

What is the correct way to use the browser build?

I've put some DropdownList components into a react-bootstrap modal and an error is thrown when the escape key is pressed while a DropdownList component is closed and has focus.

TypeError: "Cannot read property 'next' of undefined" is thrown in the component's search method.

The search method sets a timeout that expects the component to have a refs.list but refs.list does not exist because the modal has already closed and the modal and all of it's contents were removed from the DOM.

I'm thinking the escape key should do nothing when the dropdown list is in a closed state. What are your thoughts?

Hello guys

The current version (2.2.4) doesn't seem to work in IE8, there's an exception in util/dom/css.js line 36, causing dropdowns not to close.

Strangely enough, the code is different in src and in libs - in src it looks like the issue is fixed, but not in libs. Furthermore, the 2.2.4 commit modified a ton of files in libs, but not css.js. I didn't look at the build process, but this seems like maybe some build step was omitted or something.

Could someone please look into this?

Lists, are not opening to the selected item, the start at the top of the list, instead of at the scroll position of the selected item. In IE (and occasionally in other browsers) the problem is the element is set set to visible, before the height is set, so it is height 0, which breaks the scrollTop

Hey there. Was wondering if you could supply a browser version of this library. I use rails-assets to gemify asset packages so right now using this lib would require manual download and packaging without version control. Cheers.

This is a difficult bug to reproduce but I was able to do it on the demo page.

[email protected] works fine, so I've had to revert to it for now. But with [email protected], sometimes focusing on a widget or interacting with it causes the page to jump, occasionally outside of the view, which makes the feature unusable. Here is a video of me reproducing it.

Number picker will coerce eveything to a number, but == null || '' is a reasonable value for the picker.

should only allow null when there is no min prop set (ie. it is -Infinity)

How to reproduce:

1. Go to http://jquense.github.io/react-widgets/docs/#/multiselect
2. Scroll to the description of property called Value (first prop)
3. Click on the multiselect right to the code (the one that has 'orange preselected'
4. Press 'Enter' 4 times, to select all items
5. Continue pressing 'Enter'. You will get a new item in the selected items list which is 'undefined' every time you press enter.

This is a very minor bug :)

Calendar / datepicker seems to start week always from sunday even though 'fi' culture states firstDay as monday.

I'm initializing the culture like:

var Globalize = require('globalize');
require('globalize/lib/cultures/globalize.culture.fi');
Globalize.culture('fi');

running Globalize.culture() states that fi culture is chosen but the dateinput component still starts week from sunday.

This is because rw-input is a text input, which doesn't allow multiple lines. Having a textarea instead might be a decent solution, in combination with something like autosize which would allow a single line, but grow if the tag becomes too long for the parent.

What are your thoughts on this?

Hey-

Nice set of widgets here! Would love to use for my project but I'm not seeing a way to change the name attribute on the input elements that the date time picker creates. Is there a way to do this?

edit: specifically looking at https://github.com/jquense/react-widgets/blob/master/lib/pickers/date-input.js#L53-L64 and it seems like the answer is no. Just wanted to make sure I'm not missing anything

Currently when we set min / max, the back arrow will stop a month before the actual month.

To reproduce, visit the demo page and set min to May 2014, set max to November 2014, the back arrow will work until you hit June.

This seems to be an issue with the inRange function in the date-math library.

Hi,
i have a server/client checksum problem when i use the Multiselect component.
I am using the component like this:

var data = [
{ id : "1", name : "foo", ...other props },
{ id : "2", name : "bar", ...other props}]

On the client is everything ok but if I checkout the source html sended by the server I have noticed that all the objects, and not just the name, is printed inside the selection list.

This issue make React to re-render everything client side.
Do you know which could be the cause?

Thanks!

They question is also on how to do RTL, maybe a good candidate for child Context?

On the demo (website)[http://theporchrat.github.io/react-widgets/docs/#dropdown-list] the example says to use:

var DropdownList = require('react-widgets').DropdownList

which does not work. After 20 minutes of troubleshooting, I realized that the module is actually named DropDownlist

One or the other should be updated. I think DropdownList makes more sense.

A little hard to understand with no visible clicks in the gif, but basically if you select an option via mouse click, then you have to lose focus on the input and then reclick the input to show the popup again.

I've spend a little bit looking into this to solve it for you, but the focus logic is a little hard for me to follow:

  _focus(focused, e){
    if (this.props.disabled === true)
      return

    this.setTimeout('focus', () => {
      if (focused)
        this.refs.input.focus()

      else
        this.refs.tagList && this.refs.tagList.clear()

      if (focused !== this.state.focused){
        focused
          ? this.open()
          : this.close();

        this.notify(focused ? 'onFocus' : 'onBlur', e)
        this.setState({ focused: focused })
      }
    })
  },

From what it looks like, focused and this.state.focused are both true when the user clicks the input the second time. I assume a third var might be required?

Not sure, sorry mate!

When a DateTimePicker value starts with a null date, the calendar drop down shows the current month, but the user cannot navigate months until a date is selected. Then the the user can click previous and next months.

I'd like to be able to render the taglist externally on a multiselect component. Would you be open to a PR for this feature?

react-widgets 1.4.3

When typing into a Number Picker field, I get a _ is not defined error, and it points to react-widgets > lib > pickers > number-input.js

Upon examining the JS file, lodash is not declared, and adding , _ = require('lodash') fixes the problem.

PS. Two things I noticed on the documentation page for NumberPicker when trying to fix this:

1. typo: "The vombobox can also make suggestions as you type"
2. In the code example the numbers are strings, they should just be numbers.

<NumberPicker 
      value={this.state.value}
      onChange={this._change}
      min='2'
      max='10'/>

As it is, it produces the error: Warning: Invalid prop valueof typestringsupplied toNumberPicker, expected number.

• utils
• list
• combobox
• dropdownlist
• select
• datepicker
• calendar
• numberpicker
• popup
• mixins

There are a few methods in _.js that can be satisfied by es5 shim, and should be going forward. They require shims not already required by React, so it is difficult to require them on a minor bump.

• Array.prototype.some
• Array.prototype.filter
• Array.prototype.reduce (not used yet, but i always end up needing it)