Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

limel-date-picker doesn't update a manually entered value when clicking outside the input #297

Closed
adrianschmidt opened this issue Feb 15, 2019 · 1 comment · Fixed by #302
Closed

limel-date-picker doesn't update a manually entered value when clicking outside the input #297

adrianschmidt opened this issue Feb 15, 2019 · 1 comment · Fixed by #302
Assignees
@adrianschmidt @BregenzerK
Labels
bug Something isn't working

Comments

@adrianschmidt
Copy link
Collaborator

Current behavior

  1. open any datepicker
  2. change the value by changing the text in the input field
  3. click somewhere on the page, outside the input and picker

The string keeps the newly entered value, but the underlying (actual) value of the picker hasn't updated. If you click on the field again, the picker will open up with the old value, and if you save the form, the old value will (presumably) be the value that is saved.

Note: If you press Enter when the input is focused, the value updates correctly based on the input string.

Expected behavior

I can see two different acceptible behaviours:

  1. We update the value when the input loses focus. This is probably the preferred option.
  2. We discard the value when the input loses focus. This at least gives the user some chance to discover that the entered value was lost (though still with a significant risk that they will miss it, since they almost certainly have already moved their attention to where they clicked).

Environment

  • lime-elements version: 15.0.7
  • Framework used: repeatable in the lime-element docs
@adrianschmidt adrianschmidt added the bug Something isn't working label Feb 15, 2019
@BregenzerK BregenzerK self-assigned this Feb 18, 2019
BregenzerK added a commit that referenced this issue Feb 18, 2019
@BregenzerK
fix(limel-date-picker): change picker value when changing the input
8b448ae 
fix #297
@BregenzerK BregenzerK mentioned this issue Feb 18, 2019
Merged
@ghost ghost added review and removed in progress labels Feb 18, 2019
@adrianschmidt adrianschmidt self-assigned this Feb 19, 2019
BregenzerK added a commit that referenced this issue Feb 19, 2019
@BregenzerK
fix(limel-date-picker): change picker value when changing the input
3bd760e 
fix #297
adrianschmidt pushed a commit that referenced this issue Feb 19, 2019
@BregenzerK @adrianschmidt
fix(limel-date-picker): change picker value when changing the input
cf7dc60 
fix #297
@ghost ghost removed the review label Feb 19, 2019
limego added a commit that referenced this issue Feb 19, 2019
@limego
chore(release): 16.0.1 [skip ci]
7b71bbd 
## [16.0.1](v16.0.0...v16.0.1) (2019-02-19)

### Bug Fixes

* **limel-date-picker:** change picker value when changing the input ([cf7dc60](cf7dc60)), closes [#297](#297)
@limego
Copy link
Contributor

limego commented Feb 19, 2019

🎉 This issue has been resolved in version 16.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

adrianschmidt pushed a commit that referenced this issue Sep 10, 2019
@BregenzerK @adrianschmidt
fix(limel-date-picker): change picker value when changing the input
7105483 
fix #297
adrianschmidt pushed a commit that referenced this issue Sep 10, 2019
@limego @adrianschmidt
chore(release): 16.0.1 [skip ci]
cd6d658 
## [16.0.1](v16.0.0...v16.0.1) (2019-02-19)

### Bug Fixes

* **limel-date-picker:** change picker value when changing the input ([cf7dc60](cf7dc60)), closes [#297](#297)
limego added a commit that referenced this issue Sep 10, 2019
@limego
chore(release): 7.0.0 [skip ci]
9921561 
# [7.0.0](v6.0.0...v7.0.0) (2019-09-10)

### Bug Fixes

* add border to multi-select ([dbce635](dbce635))
* add border to slider ([b67e1b6](b67e1b6))
* change border bottom color on input fields ([2e0d464](2e0d464))
* correct scss imports so we do not break consumer builds ([4387292](4387292)), closes [#329](#329)
* **slider:** remove border-bottom styling ([3cd3306](3cd3306))
* correct scss-imports to remove build-error in consuming plugins ([d3c616e](d3c616e))
* **build:** fix postinstall to check if files exist ([a44c621](a44c621))
* **chart:** remove exposed ChartJS interfaces ([f327c1b](f327c1b))
* **chip set:** stop input change event from propagating ([6045075](6045075))
* **chip set:** use icon badges ([40f6eee](40f6eee))
* **chip-set:** add animation to input element ([f2d4716](f2d4716))
* **chip-set:** add missing export of chip types ([7191ad3](7191ad3))
* **chip-set:** clear text value on input blur ([a01fc9f](a01fc9f))
* **collapsible-section:** header is set as a property ([f60c1a5](f60c1a5))
* **collapsible-section:** remove unnecessary event dispatching ([a2f0e6d](a2f0e6d)), closes [#160](#160)
* **color:** use correct color variable ([e9e599b](e9e599b))
* **date-picker:** add missing export of date types ([21dd6eb](21dd6eb))
* **date-picker:** update date-picker when value is updated by the consumer ([38dbc02](38dbc02)), closes [Lundalogik/crm-feature#859](Lundalogik/crm-feature#859)
* **dialog:** minor fixes ([98f058e](98f058e))
* **dialog:** remove unnecessary event dispatching ([bca263a](bca263a)), closes [#159](#159)
* **docs:** fix issue with documentation being published at incorrect path ([20b7862](20b7862))
* **file:** add missing export of file types ([5963a47](5963a47))
* **flatpickr:** switch to @limetech/flatpickr and update to v4.5.5 ([28ba28b](28ba28b))
* **fonts:** change fontsizes ([890f471](890f471))
* **icon:** change box-sizing to border-box ([3ee7acf](3ee7acf))
* **icon:** define icon sizes ([2da8208](2da8208))
* **icon:** modify icon sizes ([70a5b13](70a5b13))
* **icon:** move icons to private repo and packagea ([531506b](531506b))
* **icon:** reduces the gap between sizes to steps of 0.5 rem ([b1f1f9a](b1f1f9a))
* **icon:** replace all black colors with current color ([f5216ab](f5216ab))
* **index.html:** add Roboto font ([7cd0557](7cd0557))
* **input field:** render icon correctly ([cbcc84b](cbcc84b))
* **input-field:** floating label if value is set or field is focused ([ecb9850](ecb9850))
* **input-field:** onChange with number input emits a number instead of string ([b3a63c4](b3a63c4))
* **install:** add postinstall.js to published files ([ba12d3b](ba12d3b))
* **limel-chip-set:** change name of method `focus` to `setFocus` ([b73ed1c](b73ed1c))
* **limel-chip-set:** make method getEditMode async ([315fd9d](315fd9d))
* **limel-collapsible-section:** call dispatchResizeEvent when section opened ([50e5039](50e5039)), closes [#192](#192)
* **limel-date-picker:** change picker value when changing the input ([7105483](7105483)), closes [#297](#297)
* **limel-date-picker:** don't format value for native pickers ([6e944ed](6e944ed))
* **limel-date-picker:** enable moving caret with keyboard ([0c35f6f](0c35f6f)), closes [#306](#306)
* **limel-date-picker:** fix language config for provided translations ([917646f](917646f)), closes [#241](#241)
* **limel-date-picker:** fix momentjs locale being set globally by datepicker ([52dd8ab](52dd8ab)), closes [#323](#323)
* **limel-date-picker:** fix pickers broken on mobile ([5565844](5565844)), closes [#311](#311)
* **limel-date-picker:** fix width calculation if initially hidden ([e1a31a0](e1a31a0)), closes [#228](#228)
* **limel-date-picker:** format property overwrites default date format ([1c39789](1c39789)), closes [#237](#237)
* **limel-date-picker:** keep formatted value in sync ([237ebd6](237ebd6)), closes [#295](#295)
* **limel-date-picker:** make sure week numbers are determined according to iso standard ([816b5f9](816b5f9))
* **limel-date-picker:** translate based on language property ([677fad7](677fad7)), closes [#241](#241)
* **limel-dialog:** fix broken markup and resulting styling of the header ([3050fe2](3050fe2))
* **limel-dialog:** make it possible to open the dialog again after clicking the scrim ([f9af30d](f9af30d)), closes [#150](#150)
* **limel-dialog:** open dialog on Microsoft Edge several times ([ecd2f7b](ecd2f7b)), closes [#314](#314)
* **limel-dialog:** possible to create fullsize dialog ([8c9468d](8c9468d))
* **limel-dialog:** set focus trap on hidden input field ([a67a8b3](a67a8b3))
* **limel-dialog:** trigger resize-event after opening-animation has finished ([58dca31](58dca31)), closes [#153](#153)
* **limel-file:** change event contains file ([0d3974e](0d3974e)), closes [#355](#355)
* **limel-icon:** undefined icons are not loaded ([f399ffa](f399ffa))
* **limel-menu:** decrease size of text and icons ([962c765](962c765)), closes [Lundalogik/crm-feature#704](Lundalogik/crm-feature#704) [#210](#210)
* **limel-menu:** no word wrapping in menu items ([ef8cc0b](ef8cc0b)), closes [#230](#230)
* **limel-multi-select:** fix label styles ([286f100](286f100))
* **limel-multi-select:** stop internal change-events from propagating outside the component ([293599a](293599a))
* **limel-multi-select:** use floating label styles ([ad68690](ad68690))
* **limel-picker:** change the interface to accept a search-function which returns a promise ([419d14d](419d14d)), closes [#70](#70)
* **limel-picker:** fix issue where suggestions might be shown even if the component is blurred ([6609886](6609886)), closes [#194](#194) [Lundalogik/crm-feature#636](Lundalogik/crm-feature#636)
* **limel-picker:** fix z-index in list by using mdc-menu-surface css ([aeac75b](aeac75b)), closes [#179](#179)
* **limel-picker:** focus event: stop propagration when element removed ([69dbad9](69dbad9))
* **limel-picker:** set chip-set id from listItem id if existing ([1f554a9](1f554a9)), closes [#256](#256)
* **limel-select:** add icon to select list ([dce4d82](dce4d82))
* **limel-select:** stop internal change-events from propagating outside the component ([29c3841](29c3841))
* **limel-slider:** adjust disabled state to material style ([0021f48](0021f48)), closes [#154](#154)
* **limel-slider:** change pin color to white ([33c612f](33c612f)), closes [#252](#252)
* **limel-slider:** use floating label styles ([511d099](511d099))
* **linear-progress:** set text-align inside progress bar to left ([217ccb6](217ccb6))
* **list:** add missing export of list types ([91665e7](91665e7))
* **list:** disabled items not handled correctly ([7d822e3](7d822e3))
* **list:** remove black hover over list item with checkbox ([5c38851](5c38851)), closes [#364](#364)
* **list:** update variable name ([b524a25](b524a25))
* **material:** update code to work with material 1.1.0 ([c9ac71a](c9ac71a))
* **multi-select:** change color on multi-select radio buttons to a dark-grey color ([45360f0](45360f0)), closes [#254](#254)
* **multi-select:** remove border-bottom styling ([09db589](09db589))
* **picker:** added value generic property to list item ([b8e43c3](b8e43c3))
* **picker:** fix focus handling of picker in edge ([24bbe71](24bbe71))
* **picker:** improve performance for limel-picker ([cdc60f2](cdc60f2))
* **picker:** makes icon size smaller in the list items ([363fda2](363fda2))
* **picker:** set focus to text field when picker receives focus ([ac459c3](ac459c3))
* **picker:** show pre-selected items ([43e6940](43e6940))
* **select:** increase z-index of scrim ([f5ead39](f5ead39))
* **select:** render select menu in document.body ([3b09b9b](3b09b9b)), closes [Lundalogik/crm-feature#839](Lundalogik/crm-feature#839)
* input field for limel-input is white ([2f7fdcb](2f7fdcb))
* **select:** use correct color for the bottom line ([edfea5b](edfea5b))
* **slider:** fix background color for disabled slider ([2cb5f92](2cb5f92)), closes [#304](#304)
* input field for limel-picker is white ([8dfc849](8dfc849))
* input field for limel-select is white ([251b279](251b279))
* snackbar listens to action event again ([2a55c87](2a55c87))
* **spinner:** change box-sizing to border-box ([697a1a9](697a1a9))
* **spinner:** define spinner sizes ([50849c9](50849c9))
* **stencil:** use the 1.X version of @stencil/sass ([a34e198](a34e198))
* **util/random-string:** make sure the string always begins with a letter, not a digit ([a6e817c](a6e817c))

### Build System

* **package.json:** update @stencil/core ([dff6a6e](dff6a6e))

### chore

* **icons:** move icons to base folder ([d8dcb00](d8dcb00))
* **limel-autocomplete:** delete component ([a7e94a8](a7e94a8)), closes [#274](#274)

### Code Refactoring

* **badge:** remove badge component ([de4805d](de4805d))
* **button group:** remove button group ([59bde8f](59bde8f))
* **grid:** rename mixin `fullpage-grid` to `grid-fullpage` ([f4a6910](f4a6910))
* **multi-select:** remove multi-select ([5ae2dae](5ae2dae)), closes [#203](#203)

### Features

* **badge:** new badge component ([30161b3](30161b3))
* **button:** add outlined button style ([bb4b5d1](bb4b5d1)), closes [#317](#317)
* **button:** add support for icons on buttons ([b80e5b6](b80e5b6)), closes [#317](#317)
* **checkbox:** adds checkbox component ([c273803](c273803))
* **chip:** new chip-set component ([2e8c200](2e8c200))
* **chip-set:** adds search label to input field when searching ([86afaf6](86afaf6))
* **chip-set:** allow setting background color when type is input ([729127e](729127e))
* **colors:** define properties for setting colors ([07e7479](07e7479))
* **date-picker:** implements date pickers ([c3b30ce](c3b30ce))
* **dialog:** add support for icon badge in header ([aec444a](aec444a)), closes [Lundalogik/crm-feature#698](Lundalogik/crm-feature#698)
* **dialog:** allow size to be set through CSS variables ([6f3c8b8](6f3c8b8))
* **flex container:** new flex container component ([7f8c481](7f8c481))
* **grid:** add scss mixin for fullpage-grid ([45e0b28](45e0b28)), closes [Lundalogik/crm-feature#709](Lundalogik/crm-feature#709) [Lundalogik/crm-feature#710](Lundalogik/crm-feature#710)
* **icon:** add `badge` attribute to limel-icon, and only add extra padding when true ([90b0f6c](90b0f6c))
* **icon:** allow setting background color on icon ([a1f5c3c](a1f5c3c))
* **input-field:** allow setting background color of field ([08685c4](08685c4))
* **limel-badges:** allow badges ([97d4277](97d4277)), closes [Lundalogik/crm-feature#695](Lundalogik/crm-feature#695)
* **limel-banner:** add component ([110d2eb](110d2eb))
* **limel-chart:** add component ([56ce163](56ce163)), closes [#287](#287)
* **limel-dialog:** add closing event ([7da7707](7da7707)), closes [#244](#244)
* **limel-dialog:** add property closingActions incl. example ([a7fba1a](a7fba1a)), closes [#139](#139)
* **limel-file:** add component ([05e4926](05e4926)), closes [#303](#303)
* **limel-grid:** add new limel-grid component ([e883a53](e883a53)), closes [#289](#289) [Lundalogik/crm-feature#758](Lundalogik/crm-feature#758)
* **limel-icon:** add limel-icon component ([23b12ca](23b12ca))
* **limel-icon-button:** add component ([259841c](259841c)), closes [#186](#186)
* **limel-icon-button:** add method `relayout` that triggers re-layout of hover-highlight ([a9fbffe](a9fbffe))
* **limel-input-field:** add prop completions as suggestions value can autocomplete to ([6b7ce7c](6b7ce7c)), closes [#274](#274)
* **limel-list:** overwrite material badge size in a list ([03d1598](03d1598)), closes [Lundalogik/crm-feature#695](Lundalogik/crm-feature#695)
* **limel-multi-select:** add multi-select component ([4803dc0](4803dc0))
* **limel-picker:** add interact event ([1e5800b](1e5800b)), closes [#256](#256)
* **limel-select:** change the `value` property from `string` to `Option` ([697d6a3](697d6a3)), closes [#129](#129)
* **limel-slider:** add factor property ([2910191](2910191)), closes [#196](#196)
* **limel-slider:** define highlight color by variable ([ce24b86](ce24b86)), closes [#252](#252)
* **linear-progress:** add indeterminate prop ([07c65a2](07c65a2))
* **linear-progress:** add variable for setting background color ([4452637](4452637))
* **linear-progress:** new linear-progress component ([cfb7f61](cfb7f61))
* **list:** add property for setting size on icon ([4eafbbc](4eafbbc))
* **list:** adds list type property ([39a2ece](39a2ece)), closes [#133](#133)
* **list:** improve list to handle multiple selection with checkboxes ([df81ce4](df81ce4))
* **list:** support for icons ([5ab7750](5ab7750))
* **menu:** support for icons ([bb57785](bb57785))
* **menu-surface:** new menu-surface component ([a32915b](a32915b))
* **picker:** add optional message for empty search result ([2b4e4a7](2b4e4a7)), closes [#307](#307)
* **picker:** adds support for displaying full list without cutting content ([7f0a31a](7f0a31a))
* **picker:** only allow unique values to be selected ([f3acb17](f3acb17))
* **picker:** set focus on chip set input when selecting from the picker ([779c9a5](779c9a5))
* **picker:** support for icons ([20dc083](20dc083))
* **picker:** support for suggestions and searching for an empty value ([d11c921](d11c921))
* **picker:** use chip set input in picker ([185ef44](185ef44))
* change definition of 1rem from 10px to 16px ([bc6548f](bc6548f)), closes [Lundalogik/crm-feature#813](Lundalogik/crm-feature#813)
* **portal:** new component for rendering content within a different DOM node ([5e75f23](5e75f23))
* **radio-button:** adds radio button to be used in lists ([9ab16df](9ab16df))
* **select:** add `required` property ([49bdc0d](49bdc0d)), closes [Lundalogik/lime-webclient#973](Lundalogik/lime-webclient#973)
* **select:** add property for selecting multiple values ([c7114c8](c7114c8)), closes [#203](#203)
* **select:** allow setting background color of field ([4b0d7cb](4b0d7cb))
* **snackbar:** add dismissible property ([33e7bc1](33e7bc1))
* **text-field:** adds support for number formatting ([c8c8e0c](c8c8e0c))
* **translations:** adds translations support ([ab396fc](ab396fc))
* open-source under Apache-2.0 license ([544a77e](544a77e)), closes [#369](#369)

### Performance Improvements

* **limel-date-picker:** on window resize, redraw picker instead of creating a new instance ([88aa280](88aa280))
* remove lamda and bind() from templates ([7c33d6b](7c33d6b)), closes [#346](#346)
* **mdc:** remove event listeners when components are destroyed ([770b014](770b014))
* **menu:** remove event listeners when component is destroyed ([7a6811b](7a6811b))

### BREAKING CHANGES

* **icon:** The icon set previously delivered with lime-elements
has been removed. The icons will be provided by the Lime products
which use lime-elements. External consumers of lime-elements need to
supply their own icons. Please see the documentation for limel-icon
for more info.
* **limel-select:** The type of the `value` property has been changed from `string` to `Option`. It now
holds the selected Option object, not just the `value` of the selected Option. An empty value,
previously represented by an empty string, is now represented by `null` instead.
* **list:** Removes selectable and multiple properties and adds type property.
With the type property it's now also possible to have radio button lists.
* **multi-select:** multi-select component has been removed in favor of the select component that now
has a property called `multiple` that offers the same functionality in a better way
* **icon:** Reverts breaking change to limel-icon from v17.0.0 (fd006f8).
* All size values have been rescaled to assume 1rem=16px.
* **picker:** Removed the index signature from ListItem interface. Consumers of list items should
pass any custom values in the value property instead
* **button group:** Button group has been removed in favor of flex container, which offers the same
functionality with a cleaner API and is not constrained to only containing buttons
* **badge:** The badge component has been removed. Code that uses the badge component should use
the icon component instead, which offers the same functionality.
* **limel-grid:** The scss-mixin grid-fullscreen has been removed. It is replaced by the new
limel-grid component.
* **package.json:** **lime-elements** has been updated to use
Stencil One. This makes it incompatible with any components
built with older versions of Stencil. To upgrade to this
version of **lime-elements**, also upgrade your own code to
use Stencil One (v1.0.0 or later).
* **grid:** In order to better accommodate other grid mixins in the future, the mixin
`fullpage-grid` has been renamed to `grid-fullpage`.
* **collapsible-section:** New interface for lime-collapsible-section
* **limel-chip-set:** The method `getEditMode` on limel-chip-set is now async (it will return a promise).
* **icons:** Icons have been moved out from the folder structure and are all located in one folder instead
* **text-field:** Renames limel-text-field to limel-input-field.
* **limel-chip-set:** The method `focus()` on `limel-chip-set` has been renamed to `setFocus()`.
* **limel-dialog:** While backwards compatible in most cases, some functionality has been removed. If
the `heading`-attribute is not set, the text-content of anything injected into the header-slot is
copied and placed in the new h2-element. But any use of `<em>`, `<strong>`, or similar, will be
stripped. So will any `<a>` tags. But none of these should be used in a dialog-heading anyway.
* **limel-picker:** The `input` event has been removed. Instead, the picker should be supplied with a
searcher-function, that accepts a query string as argument, and returns a promise that is eventually
resolved with the search-result. As a result, the `items` property has also been removed, since
these are now supplied by the searcher instead.
* **limel-autocomplete:** limel-autocomplete is deleted, use limel-input-field with completions instead
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@adrianschmidt adrianschmidt

@BregenzerK BregenzerK

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(limel-date-picker): change picker value when changing the input Lundalogik/lime-elements
3 participants
@adrianschmidt @BregenzerK @limego