Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
All
Calendar
Fixed: We fixed a bug, that caused an infinite loop exception in Angular, when the calendar's input field was empty and editable. The exception was thrown right after the calendar was opened.
Fixed: We fixed a typo in the Italian day name translation.
Cards
themeVariant option used on the Card component was unwillingly passed to a div element, which resulted in a warning in React.Datetime
Eventcalendar
Fixed: We fixed an issue, where the weekDays and yearChange options were not working if specified inside the responsive option.
Fixed: We fixed a typo in the Italian day name translation.
Forms
min was equal to max.Numpad
option method. You can now pass options that are specific to the different presets like the decimal or the timespan numpad for example.Select
Fixed: We fixed an issue where the Select was not properly destroyed if initialized on an input element with data option.
Fixed: We fixed an issue where in desktop mode the first option was partly out of view in case of event row numbers (#480).
All
Calendar
currentTarget instead of this for Salesforce LWC compatibility.Eventcalendar
Fixed: We improved the calendar previous and next button listeners to use currentTarget instead of this for Salesforce LWC compatibility.
Fixed: We improved the event ordering so that cross-day events not marked as all day will not appear on top.
New: We added the eventOrder option to customize the sort order of the events.
Forms
Fixed: We fixed the source code of the collapsible to use an ES6 syntax which works with an Angular app without the need to transpile.
Fixed: We fixed an issue with the rating control, where the stars were off in RTL mode on iOS Safari, if value was set programmatically later after initialization.
Fixed: We fixed an issue where sometimes toast and snackbar notifications stopped appearing if they were coming in very quickly.
Fixed: We fixed the slider component with 2 handles, which were stuck if both initial values were set to the maximum.
Fixed: We improved compatibility with Mobiscroll v5, so the v4 form elements appear correctly if v5 styling is also loaded.
Listview
stopPropagation on the touchstart event is needed to prevent the scrollview from moving when a listview item is swiped.Numpad
1:08 cannot be entered, since after entering the 0, buttons above 5 were disabled.Range
currentTarget instead of this for Salesforce LWC compatibility.General
theme and themeVariant options.Calendar
Fixed: We fixed a null pointer exception, which happened from time to time when the picker was closed.
Fixed: We fixed a type definitions issue, that lets the colors and the marked option to take a start and an end date instead of just a single date.
Fixed: We fixed an iOS theme button positioning issue in case of a full screen calendar, if more than two buttons were used for the picker.
Cards
Eventcalendar
colors and the marked option to take a start and an end date instead of just a single date.Forms
Fixed: We fixed the multiple handle slider, which broke with the introduction of passive event listeners in v4.10.4.
Fixed: We fixed the angular textarea component to update its initial rows when used with reactive forms.
Navigation
Fixed: We fixed the layout propType in react to work without giving a warning when used with numbers.
Fixed: Remove outline styling from focused navigation items in Angular/Ionic.
Fixed: Never fire the onItemTap event on disabled items.
New: We added the optional animTime parameter to the navigate method for specifying the duration of the scroll animation.
Numpad
Fixed: We fixed an issue in the decimal numpad, which caused '0' to appear in the input even though the selected value should have been empty.
Fixed: We fixed a bug in the decimal numpad, that didn't let enter all the digits of a number when used in template mode and the initial value was zero.
Fixed: We fixed an issue in the decimal numpad that caused the decimal point to be in the wrong place after the initial value was parsed when used in template mode.
Scrollview
Fixed: We fixed the layout propType in react to work without giving a warning when used with numbers.
New: We added the optional animTime parameter to the navigate method for specifying the duration of the scroll animation.
Select
Fixed: We fixed an issue which caused an exception if an option value contained more than one qoutation marks (").
Fixed: We fixed an error which occured in case of inline select with remote data.
Range
Fixed: We fixed a null pointer exception, which happened from time to time when the picker was closed.
Fixed: We fixed a type definitions issue, that lets the colors and the marked option to take a start and an end date instead of just a single date.
General
General
Fixed: We fixed an issue which caused an error when used with React SSR (regression introduced in 4.10.4).
Fixed: We added a fix to prevent the "Unable to preventDefault inside passive event listener invocation." error in case of all scroller based pickers (regression introduced in 4.10.4).
New: We made the necessary type changes for compatibility with Angular 10.
New: We exposed the option types for all react components. This helps to extend our components in typescript by creating derived types.
Calendar
Eventcalendar
Range
Scrollview
General
Fixed: We fixed the themeVariant setting, that caused the conrols to remain in dark mode when switching back to the light variant dynamically.
Fixed: We fixed the themeVariant in angular components. Now it affects the rendered mbsc-input components as well, not just the pickers.
Fixed: We fixed the month names in the Arabic translation.
Fixed: We fixed an issue with iOS 13, where not every click event was fired because of the use of non-passive touch event listeners.
Fixed: We got rid of violation warnings for not using passive touch event listeners.
Calendar
Fixed: We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
Fixed: We fixed a bug which caused a console error if all days on the calendar had a label.
Fixed: We fixed the prev / next year navigation when the Jalali calendar system was used.
Fixed: We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
Fixed: We updated the type definitions of the value prop in react. We added support for the null value, that should be used when the calendar needs to be cleared.
Fixed: We fixed the multiple week selection, where limiting the number of selected weeks did not work correctly.
Eventcalendar
Fixed: We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
Fixed: We fixed a bug which caused a console error if all days on the calendar had a label.
Fixed: We fixed the prev / next year navigation when the Jalali calendar system was used.
Fixed: We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
Fixed: We fixed a bug where the onPageChange, onPageLoading and onPageLoaded events fired twice when only the event list view was visible.
Navigation
Fixed: We fixed the responsive option, which caused an error when used with the navigation component.
Fixed: We fixed a bug where an error was thrown if there were no navigation initially and the snap option was true.
Fixed: We added an improvement to make sure the selected item remains in the viewport after resize.
Numpad
Fixed: We fixed a bug that prevented the decimal numpad to set the value to the input element in freeform entry mode when calling the setVal function.
Fixed: We fixed a bug that added the decimal separator, when the initial value was an integer.
Range
Fixed: We fixed a bug that prevented the onCellHoverIn and onCellHoverOut events to fire after a day was clicked.
Fixed: We fixed a bug which caused a console error if all days on the calendar had a label.
Fixed: We fixed the prev / next year navigation when the Jalali calendar system was used.
Fixed: We fixed the invalid option to accept the object format for simple rules as well, like { d: '2020-06-15' } or { d: 'w0' }.
Scroller
Select
Fixed: We added a missing input option for the Angular Select component.
Fixed: We fixed a bug that prevented the initial value to show up in the input, when multiple selection and onPush changedetection strategy was used in Angular.
Fixed: We fixed an issue with Angular, where single select mode was not working correctly with touchUi: false.
General
Fixed: We removed the dotted outline present at the top of popups and modal pickers in Firefox.
Fixed: We fixed an issue that prevented the mobiscroll directives to pop up on the first tap when they were used on ion-input in Ionic 5 / Angular 9.
Calendar
Fixed: We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
Fixed: We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
New: Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.
New: We added a feature which allows presenting calendar labels as text only, without colored background, by specifying the background: 'none' property.
Eventcalendar
Fixed: We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
Fixed: We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
Fixed: We fixed a rendering issue on iOS 13 WebView, where the month / year picker appeared without a background.
New: Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.
Forms
Listview
Numpad
., +, and - keys).Popup
Range
Fixed: We fixed an issue where the calendar jumped back to the current month in Angular when the mbsc-range-start and mbsc-range-end components were used with a custom set button.
Fixed: We debounced the onCellHoverIn and onCellHoverOut to prevent firing on unintended hover, or during mousedrag.
Fixed: We fixed a problem where recurring invalids for month days were not working correctly, when a month day was used which is not present in every month (29, 30, 31).
New: Added mbsc-calendar-mark scss color variable allowing to set the default color of the marks.
New: We added a feature which allows presenting calendar labels as text only, without colored background, by specifying the background: 'none' property.
Rating
onChange event to fire on the React Rating component.Select
General
Eventcalendar
Fixed: We fixed an issue where the previous and next navigation buttons were not disabled when the min or max boundaries were reached.
Fixed: We fixed a memory leak that occured when using the event popover and changing the calendar settings dynamically at the same time.
Fixed: We fixed an issue where the event popover was not dismissed when navigating the calendar programmatically.
General
Cards
Eventcalendar
Forms
Fixed: We fixed the form background color in ios theme, to be consistent with previous versions.
Fixed: We fixed the border color of textfields, to be consistent with previous versions.
Listview
General
Calendar
New: We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
Fixed: We added the missing role="row" attributes on calendar rows for improved accessibility (#473).
Eventcalendar
New: We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
Fixed: We added the missing role="row" attributes on calendar rows for improved accessibility (#473).
Fixed: We made possible to navigate the event list using the Tab key for improved accessibility.
Measurements
decimalSeparator setting to localize the decimal separator charachter.Navigation
onItemTap event to fire twice if the navigation control was nested inside a Scrollview.Number
decimalSeparator setting to localize the decimal separator charachter.Numpad
New: We added the onInput event, which runs every time the value is changed from the UI. This is useful to perform custom tasks when the user is typing the value, e.g. auto-suggest values for quick selection.
New: We added the possibility to enter decimal values freely without a pre-defined, fixed scale. This can be enabled through the entryMode setting that accepts template and freeform . The maximum length of the fractional part can be limited by the also newly introduced maxScale that defaults to 4.
Range
New: We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.
Fixed: We added the missing role="row" attributes on calendar rows for improved accessibility (#473).
Select
General
Fixed: We fixed an issue with scroller pickers, where longer wheel values were cut off, even if there were enough space to display them. The issue was limited to the iOS theme in bubble and center mode.
Fixed: We fixed the iOS theme 3D wheels styling to display in perspective in Edge and Firefox as well.
Forms
Listview
Fixed: We fixed the hierarchical navigation direction and arrow positioning in RTL mode.
Fixed: We fixed the list item border styling in RTL mode for the iOS theme.
Fixed: We fixed the action menu styling where part of the menu was cut off in recent Chrome versions.
Optionlist
General
New: New: We are rolling out support for Angular Ivy and Angular 9 (#470).
New: New: We added the themeVariant setting which can be used to set light and dark variants of the selected theme and introduced auto to make switching dynamic based on system settings.
Fixed: We increased the width of alerts, confirms and prompts to accomodate longer button texts.
Fixed: We fixed the prompt input styling for Mobiscroll and Material themes.
Fixed: We fixed a compile error that came up when using the strict typescript compiler option in Angular and Ionic.
General
Fixed: We fixed an issue with IonInputs in react, that required a second tap to open the Mobiscroll components on iOS devices.
Fixed: We fixed the readonly setting in the type definitions of Angular and React components.
Fixed: We fixed the auto theme to work on iPad with iOS 13 as well.
Calendar
Color
Navigation
Fixed: Added missing type definitions for the React Router setup function.
Fixed: We fixed the popup dissapearing issure present in iOS 12.4 UIWebView.
Forms
Fixed: We fixed a bug that prevented the initially set value to show on the Radio and Segmented components, when using the Reactive Forms in Angular. The problem occured when the Radio and Segmented items were rendered dynamically.
Fixed: We fixed an animation bug which occured when closing the mbsc-collapsible.
Timespan
... on the scroll wheels.General
Fixed: We fixed an issue which caused the modal pickers to close on the first tap in Ionic 1 on Android.
Fixed: Fixed a bug in angular, that produced an exception when the components were initially disabled with reactive forms.
Forms
Fixed: We added the missing predefined colors styling for Stepper and Slider components rendered outside of a Form.
Fixed: We added the missing predefined colors styling for Checkbox component for the Windows theme.
Fixed: Corrected the type definitions for the angular switch component's error setting.
Fixed: We fixed a file input bug, where the input was duplicated on every reinitialization.
Fixed: We fixed the step-label API of the Slider and Progress components in angular. Only JSON strings were working before where now arrays can be used as well.
Calendar
Fixed: We fixed a swipe animation bug (flickering) on month change on iOS that manifested in bubble mode.
Fixed: We fixed the positioning of marks and labels in RTL mode in Chrome.
Eventcalendar
Fixed: We fixed an issue which caused infinite height increase on the calendar if there was a hidden calendar also in the page markup.
Fixed: We fixed the positioning of marks and labels in RTL mode in Chrome.
Range
General
Forms
readonly property on form components, allowing dynamic binding of the property.Select
Eventcalendar
Navigation
setupReactRouter function that enables the navigation component to work with React Router version 5.Forms
Fixed: We corrected the floating label animation for outline inputs with Mobiscroll and Material themes.
Fixed: We added the missing active styling for switch, slider, checkbox and radio buttons for the Material theme.
Fixed: We fixed the button hover styling for the Material dark theme.
Fixed: We fixed the input-style attribute for Angular checkboxes, which was not taken into account.
Fixed: We fixed the floating label on the mbsc-input component in Angular and Ionic, which was not active initially, when the input was focused on pageload.
Fixed: We added the missing floating label styling to the slider and progress components with iOS theme.
Fixed: We removed the segmented component's background color for box and outline input styling for the iOS theme.
Fixed: We fixed a bug in the switch, progress and slider controls, that messed up their styling when their theme was changed dynamically.
Fixed: We changed the text color for predefined buttons to white with iOS theme for better readability.
Fixed: We fixed a small bug in the case of floating labels: when the input was focused, and the label was clicked, the input briefly lost the focus, causing the label to animate quickly up and down.
Fixed: Double initialization of form controls mixed up the styles. We fixed that as well.
New: We added the context setting to the Angular Form component. This setting is inherited by the form's child components and makes it easier to deal with Ionic modals stealing back the focus and scrolling when Mobiscroll components pop up.
New: We thickened the track bar of the progress and slider for the iOS theme to conform with the new iOS 13 design standards.
General
New: We got rid of the rxjs-compat package dependency in angular and ionic.
New: Added new showInput setting for all scroller and calendar based components. Using this setting, an mbsc-input - showing the selected value - can also be rendered when components are displayed in inline mode.
Fixed: Updated the type definitions of the option method in all components. The type of the arguments are now defined based on the type of the involved component settings.
Image
mbsc-image Angular component to correctly display the component in inline as well.Page
New: We added new typography utility classes for setting line height: mbsc-line-height-xs, mbsc-line-height-s, mbsc-line-height-m, mbsc-line-height-l, mbsc-line-height-xl.
New: We added new typography classes for heading, paragraph, list and link styles, which can be used outside of the Page component: mbsc-h1 ... mbsc-h6, mbsc-p, mbsc-a, mbsc-ul, mbsc-ol.
Select
Range
Color
Fixed: We fixed a bug in the react component that caused the placeholder text not to show in the input.
Fixed: Fixed a rendering issue for the color inputs with labels in React.
General
mbsc-align-justify utility class for justified text align styling.Eventcalendar
Fixed: We fixed a bug, which caused the eventlist to show only the events of the current day in agenda view, when the list was scrolled.
Fixed: We fixed the navigate method to scroll correctly to the specified date in agenda view.
Forms
Fixed: Removed unnecessary box-shadow for Toast and Prompt components.
Fixed: Fixed a rendering issue for the icons on inputs with no labels for the iOS theme.
Fixed: Corrected the styling of the outline, flat and disabled buttons for the Material theme.
Fixed: Removed backgound and border from iOS themed non-text form controls outside of mobiscroll forms.
New: We added support for commonly used HTML attributes for the mbsc-textarea component in Angular. The following attributes are supported and passed through to the native input: minlength, maxlength, autocomplete, autocapitalize, autocorrect, spellcheck, autofocus, required, wrap.
Navigation
Select
Datetime
Eventcalendar
Fixed: An issue got fixed that happened on month change. If both the first and second day of the month was invalidated, an error was thrown and calendar navigation broke.
Fixed: We fixed a rendering issue for the all-day text that happened for certain languages.
Fixed: We fixed the event listing for Brazilian timezones that happened during DST months.
New: We added the getJson utility function to the event calendar component.
Forms
Fixed: Fixed the autofill underline input styling in the iOS theme.
Fixed: Removed text capitalization of the segmented control text in the iOS and Material themes.
New: Form controls are now working individually, without the need to wrap them inside a Mobiscroll Form component.
New: Added support for disabling 'mbsc-input’ the reactive way not just through the disabled attribute.
General
Fixed: Fixed an issue that broke Angular 8 AOT builds.
Fixed: We fixed a bug that broke the compilation process in Angular when using the ES6 modules.
Fixed: We fixed the styling of the arrow in bubble display mode for the Windows theme.
Listview
getJson utility function to the listview component.Scrollview
Fixed: We fixed a bug where the input elements placed inside a scrollview were not focusable on touch devices.
Fixed: We fixed the Typescript definitions for the scrollview options to allow number type for the layout setting.
Select
Forms
Fixed: Made the color of the stepper, snackbar text lighter to improve contrast for certain themes.
Fixed: We fixed the background color for the segmented component in pressed state within the iOS theme.
Fixed: We fixed a bug where the segmented components items appeared incorrectly in Angular when Bootstrap was also loaded.
Fixed: Stacked label position was fixed in case of outline inputs with Mobiscroll theme.
New: We added support for commonly used HTML attributes for the mbsc-input component. The following attributes are supported and passed through to the native input: min, max, minlength, maxlength, autocomplete, autocapitalize, autocorrect, spellcheck, autofocus, step, pattern, required, accept, multiple.
New: Added support for input type="file". File inputs will be consistently styled with other form elements.
Listview
Numpad
min and max settings to be rounded accordingly to the scale setting.Popup
Range
Scrollview
Select
General
Forms
Cards
Color
Fixed: Styling fixes for the Windows theme.
Fixed: Stacked and floating labels were not working correctly with the iOS theme.
Fixed: Moving the slider has thrown an error when the initial color value on the input was not between the defined colors.
Eventcalendar
Fixed: The default inline display mode was not applied initially on the angular component.
Fixed: In agenda view, if scrollable event list was enabled, scroll was not working - the event list was constantly re-rendered on scroll.
Listview
Fixed: The actionable setting was missing from type definitions.
Fixed: The instance parameter was missing from the onStageChange event handler type definitions.
Fixed: The select, deselect, hideLoading and showLoading methods were missing from type definitions.
Popup
responsive setting did not work for the Popup component.Select
General
Fixed: Angular event listeners that were passed in the options object were not triggered.
Fixed: In Angular, if a component's value and options were changed at the same time, the value was not updated correctly.
Eventcalendar
Forms
onChange event of the Slider was not working in React.Listview
option method was missing from the instance type definitions.Timer
Timespan
General
New: Styling was rewritten from Less to Sass, and the scss files are included in the packages as well, making possible to modify the theme colors programatically, without using the theme builder.
Fixed: Improved on angular bundle sizes.
Fixed: A bunch of type definition issues.
Forms
Fixed: Fixed the Input's floating label styling in Angular, when used with Reactive Forms.
Fixed: In React, fixed a bug that killed the Switch components animation when the value was changed programatically.
Fixed: Corrected the inset binding of the MbscFormGroup component in angular, to change when a false value is passed to it.
Listview
Numpad
responsive setting did not work.Optionlist
General
mobiscroll.platform was missing from typescript definitions.Datetime
Eventcalendar
Fixed: Don't display "all day" for multi-day events on the first and last days, unless allDay property is explicitly set (#464).
New: Pass the event object as well to the formatDuration function (#466).
Forms
Fixed: Remove uneccesary shadow from toast and snackbar messages (Material theme).
Fixed: Remove background from form group title and button gruoups inside popup (iOS theme).
Fixed: Remove max-width from the stacked and floating labels (iOS theme).
Fixed: Button shadow was cut off inside button groups (Material theme).
Fixed: Input editing did not work on iOS 12.2, inside WkWebView.
New: Added the mobiscroll.notification.dismiss() function which will close the active toast or snackbar message.
Scroller
width setting, which can be array as well, not just number.General
Fixed: Inline scrollers did not work correctly in MS Edge/IE, causing the whole page to scroll.
Fixed: React components can be used with IonInput in Ionic 4 React.
Fixed: Run the resize observer outside of the Angular zone.
New: We made it possible to display pickers and popups without overlay, using the showOverlay setting.
Changed: We disabled touchpad scroll for calendar views by default (can be enabled using the mousewheel setting).
Eventcalendar
Navigation