search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
445 stars 83 forks source link

[time-picker] Default i18n.parseTime get executed even if custom i18n.parseTime is provided #911

Open pdesjardins90 opened 6 years ago

pdesjardins90 commented 6 years ago

I have this:

 static get template () {
        return Polymer.html`
          <style include="sea-reset shared-styles"></style>
          <vaadin-time-picker id="time"
                              name="[[name]]"
                              label="[[label]]"
                              required="[[required]]"
                              disabled="[[disabled]]"
                              step="1800"
                              invalid="{{invalid}}"
                              value="[[value]]"
                              i18n="[[_computei18n(i18n)]]"
                              error-message="[[errorMessage]]"
                              on-value-changed="_subValueChanged"></vaadin-time-picker>
        `
      }

      static get properties () {
        return {
          disabled: Boolean,
          errorMessage: {
            type: String,
            value: Localization.tr('Invalid time')
          },
          i18n: {
            type: Object,
            value: {}
          },
          invalid: {
            type: Boolean,
            notify: true
          },
          label: {
            type: String,
            value: Localization.tr('Time')
          },
          name: String,
          required: Boolean,
          value: {
            type: String,
            notify: true
          }
        }
      }

      _computei18n (i18n = {}) {
        return Object.assign({
          formatTime: dayTimeObject => this.__formatDayTimeObject(dayTimeObject),
          parseTime: displayedTime => this.__parseDisplayedTimeToDayTimeObject(displayedTime)
        }, i18n)
      }

but I get this error just by loading the page where the picker is: Uncaught SyntaxError: Invalid regular expression: /^(\d|[0-1]\d|2[0-3])(?::(\d|[0-5]\d)(?::(\d|[0-5]\d)(?:\.(\d{1,3}))?)?)?$/: Stack overflow @ vaadin-time-picker: line 229

This should not run as I provide my own i18n object

I'm using vaadin-time-picker v1.0.0-beta1

pdesjardins90 commented 6 years ago

Also maybe that regex shoudn't explode?

andythsu commented 5 years ago

removed the error by using .value instead (I'm using Litelement)

samiheikki commented 5 years ago

The following code is working with me:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <title>vaadin-time-picker Examples</title>
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../polymer/polymer.html">

  <link rel="import" href="../vaadin-time-picker.html">
</head>

<body>
  <dom-module id="custom-time-picker">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      <vaadin-time-picker i18n="[[_computei18n(i18n)]]"></vaadin-time-picker>
    </template>
    <script>
      class CustomTimePicker extends Polymer.Element {
        static get is() {
          return 'custom-time-picker';
        }

        static get properties () {
          return {
            i18n: {
              type: Object,
              value: {}
            }
          }
        }

        _formatDayTimeObject(dayTimeObject) {
          return dayTimeObject;
        }

        _parseDisplayedTimeToDayTimeObject(displayedTime) {
          return displayedTime;
        }

        _computei18n(i18n) {
          return Object.assign({
            formatTime: dayTimeObject => this._formatDayTimeObject(dayTimeObject),
            parseTime: displayedTime => this._parseDisplayedTimeToDayTimeObject(displayedTime)
          }, i18n);
        }
      }
      customElements.define(CustomTimePicker.is, CustomTimePicker);
    </script>
  </dom-module>

  <custom-time-picker></custom-time-picker>
</body>
</html>
tomivirkki commented 3 years ago

Seems that this is still an issue. If value gets set before i18n, it might be that the format of the value isn't compatible with the default parser and you end up with an error.