@luomus/laji-form 15.1.41 → 15.1.42

package/dist/styles.css

@@ -2222,10 +2222,15 @@ body .laji-form {
 	font-weight: bold;
 	display: inline-block;
 	text-align: center;
+	cursor: pointer;
 }
 .laji-form .laji-form-help-glyph:before {
 	content: "?";
 }
+.laji-form .laji-form-help-glyph:focus {
+	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
+	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
+}
 
 .laji-form .laji-form-map-container {
 	z-index: 1;
@@ -2848,6 +2853,11 @@ body .laji-form {
 .laji-form .laji-form-error-list .btn-link:focus {
 	outline: none;
 }
+.laji-form .btn-group.laji-form-checkbox-widget-tab-target:focus {
+	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
+	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
+	outline: none;
+}
 .laji-form-error-list .laji-form-error-list-expand {
 	font-size: 12px;
 }
@@ -2869,6 +2879,22 @@ body .laji-form {
 	display: table;
 }
 
+.laji-form-checkbox-selected-value-glyph, .laji-form-checkbox-unselected-value-glyph {
+	pointer-events: none;
+}
+.laji-form-checkbox-selected-value-glyph:before, .laji-form-checkbox-unselected-value-glyph:before {
+	content: "•";
+	margin-right: 6px;
+	height: 0;
+	font-weight: 900;
+	color: #9e9e9e;
+	font-size: 18px;
+	vertical-align: -2px;
+}
+.laji-form-checkbox-unselected-value-glyph:before {
+	visibility: hidden;
+}
+
 .laji-form.map-dialog .modal-content, .laji-form.map-dialog .modal-body {
 	width: auto;
 	height: inherit;
@@ -3869,4 +3895,11 @@ body .laji-form {
 	height: 25px;
 }
 
+.laji-form-label-help-margin {
+	padding-right: 25px;
+}
+
+.laji-form-label-help-margin-clear {
+	margin-left: -20px !important;
+}
 

package/lib/components/components.d.ts

@@ -1,9 +1,21 @@
 export function AddButton({ onClick }: {
     onClick: any;
 }): JSX.Element;
-export function Help({ help, id }: {
+/**
+ * @param standalone If provided, the help icon will handle **accessibility** itself.
+ * If not provided, the parent element must take care of showing the tooltip.
+ *
+ * **accessibility** means that it handles showing the tooltip on focus & hover, and
+ */
+export function Help({ help, id, focusable, onFocus, onBlur, className, onClick, standalone }: {
     help: any;
     id: any;
+    focusable?: boolean | undefined;
+    onFocus: any;
+    onBlur: any;
+    className: any;
+    onClick: any;
+    standalone: any;
 }): JSX.Element;
 export function Label({ label, children, id, required, registry, uiSchema }: {
     label: any;

package/lib/components/components.js

@@ -236,8 +236,9 @@ class Affix extends React.Component {
         window.removeEventListener("resize", this.onResize);
     }
     componentDidUpdate(prevProps, prevState) {
-        if (!this.props.onAffixChange || !prevState || !this.state)
+        if (!this.props.onAffixChange || !prevState || !this.state) {
             return;
+        }
         if (prevState.affixState !== AFFIXED && this.state.affixState === AFFIXED) {
             this.props.onAffixChange(true);
         }
@@ -355,15 +356,32 @@ class Stretch extends React.Component {
     }
 }
 exports.Stretch = Stretch;
-function Help({ help, id }) {
-    const helpGlyph = React.createElement("span", { className: "laji-form-help-glyph text-muted" });
+/**
+ * @param standalone If provided, the help icon will handle **accessibility** itself.
+ * If not provided, the parent element must take care of showing the tooltip.
+ *
+ * **accessibility** means that it handles showing the tooltip on focus & hover, and
+ */
+function Help({ help, id, focusable = false, onFocus, onBlur, className, onClick, standalone }) {
     const { Tooltip } = React.useContext(ReactContext_1.default).theme;
-    return help ? (React.createElement(OverlayTrigger, { placement: "right", overlay: React.createElement(Tooltip, { id: id },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: help } })) }, helpGlyph)) : helpGlyph;
+    const [focused, setFocused] = React.useState(undefined);
+    const onHelpFocus = React.useCallback(() => {
+        setFocused(true);
+    }, []);
+    const onHelpBlur = React.useCallback(() => {
+        setFocused(false);
+    }, []);
+    const helpGlyph = React.createElement("span", { className: utils_1.classNames("laji-form-help-glyph", "text-muted", className), tabIndex: focusable ? 0 : -1, onFocus: standalone ? onHelpFocus : onFocus, onBlur: standalone ? onHelpBlur : onBlur, onClick: onClick });
+    const tooltip = React.createElement(Tooltip, { id: id },
+        React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }));
+    return help ? (React.createElement(OverlayTrigger, { placement: "right", overlay: tooltip, show: standalone && focused || undefined },
+        React.createElement(React.Fragment, null,
+            helpGlyph,
+            standalone && React.createElement("div", { id: `${id}--help`, style: { display: "none" } }, help)))) : helpGlyph;
 }
 exports.Help = Help;
 function Label({ label, children, id, required, registry = {}, uiSchema = {} }) {
-    const { "ui:help": help, "ui:helpHoverable": helpHoverable, "ui:helpPlacement": helpPlacement } = uiSchema;
+    const { "ui:help": help, "ui:helpHoverable": helpHoverable, "ui:helpPlacement": helpPlacement, labelComponent } = uiSchema;
     const showHelp = label && help;
     const { Tooltip } = React.useContext(ReactContext_1.default).theme;
     const tooltipElem = (React.createElement(Tooltip, { id: id + "-tooltip" }, help ? (React.createElement("span", null,
@@ -371,12 +389,25 @@ function Label({ label, children, id, required, registry = {}, uiSchema = {} })
         React.createElement("br", null),
         React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }))) : label));
     const requiredHtml = required ? "<span class='text-danger'>*</span>" : "";
-    const labelElem = (React.createElement("label", { htmlFor: id },
+    const [focused, setFocused] = React.useState(undefined);
+    const onHelpFocus = React.useCallback(() => {
+        setFocused(true);
+    }, []);
+    const onHelpBlur = React.useCallback(() => {
+        setFocused(false);
+    }, []);
+    const onHelpClick = React.useCallback((e) => {
+        e.preventDefault();
+    }, []);
+    const LabelComponent = labelComponent || "label";
+    const labelElem = (React.createElement(LabelComponent, { htmlFor: id, "aria-describedby": `${id}--help` },
         React.createElement("div", null,
             React.createElement("strong", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
-            showHelp ? React.createElement(Help, null) : null),
+            showHelp ? React.createElement(Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick }) : null),
         children));
-    return (label || help) ? (React.createElement(OverlayTrigger, { placement: helpPlacement || "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext }, labelElem)) : labelElem;
+    return help ? React.createElement(React.Fragment, null,
+        React.createElement(OverlayTrigger, { placement: helpPlacement || "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext, show: focused || undefined }, labelElem),
+        React.createElement("div", { id: `${id}--help`, style: { display: "none" } }, help)) : labelElem;
 }
 exports.Label = Label;
 class ErrorPanel extends React.Component {
@@ -479,11 +510,16 @@ class OverlayTrigger extends React.Component {
             if (this.overlayTimeout) {
                 clearTimeout(this.overlayTimeout);
             }
-            this.overlayTimeout = this.props.formContext.setTimeout(() => {
-                if (!this.popoverMouseIn && !this.overlayTriggerMouseIn) {
-                    this.setState({ hoveringElem: false });
-                }
-            }, 200);
+            if (this.props.hoverable) {
+                this.overlayTimeout = this.props.formContext.setTimeout(() => {
+                    if (!this.popoverMouseIn && !this.overlayTriggerMouseIn) {
+                        this.setState({ hoveringElem: false });
+                    }
+                }, 200);
+            }
+            else {
+                this.setState({ hoveringElem: false });
+            }
         };
         this.overlayMouseOver = () => {
             this.setState({ hoveringOverlay: true });
@@ -502,10 +538,10 @@ class OverlayTrigger extends React.Component {
         const _a = this.props, { children, overlay, contextId } = _a, //eslint-disable-line @typescript-eslint/no-unused-vars
         props = __rest(_a, ["children", "overlay", "contextId"]);
         const { OverlayTrigger } = this.context.theme;
-        if (!this.props.hoverable)
-            return (React.createElement(OverlayTrigger, Object.assign({}, props, { overlay: overlay }), children));
         let _overlay = React.cloneElement(overlay, { onMouseOver: this.overlayMouseOver, onMouseOut: this.overlayMouseOut });
-        const show = this.state.hoveringElem || this.state.hoveringOverlay;
+        const show = this.props.show !== undefined
+            ? this.props.show
+            : this.state.hoveringElem || this.props.hoverable && this.state.hoveringOverlay;
         return (React.createElement("div", { onMouseOver: this.overlayTriggerMouseOver, onMouseOut: this.overlayTriggerMouseOut },
             React.createElement(OverlayTrigger, Object.assign({}, props, { delay: 1, trigger: [], placement: this.props.placement || "top", overlay: _overlay, show: show }), children)));
     }

package/lib/components/fields/SingleActiveArrayField.js

@@ -68,14 +68,7 @@ let SingleActiveArrayField = class SingleActiveArrayField extends React.Componen
                 });
         };
         this.onHeaderAffixChange = (elem, value) => {
-            if (value) {
-                this.setState({ scrollHeightFixed: elem.scrollHeight }, () => {
-                    this.getLocalFormContext().utils.syncScroll(!!"force");
-                });
-            }
-            else {
-                this.setState({ scrollHeightFixed: 0 });
-            }
+            this.setState({ scrollHeightFixed: value ? elem.scrollHeight : 0 });
         };
         this.getLocalFormContext = () => {
             if (this.localContextKey === this.state.scrollHeightFixed) {
@@ -940,6 +933,15 @@ class AccordionHeader extends React.Component {
                     };
             });
         };
+        this.onHelpFocus = () => {
+            this.setState({ focused: true });
+        };
+        this.onHelpBlur = () => {
+            this.setState({ focused: false });
+        };
+        this.onHelpClick = (e) => {
+            e.preventDefault();
+        };
     }
     render() {
         const { that, idx } = this.props;
@@ -947,7 +949,10 @@ class AccordionHeader extends React.Component {
         const popupData = that.state.popups[idx];
         const { uiSchema } = that.props;
         const hasHelp = uiSchema && uiSchema["ui:help"];
-        const headerText = (React.createElement("span", null,
+        const spanProps = hasHelp
+            ? { "aria-describedby": `${that.props.idSchema.$id}_${idx}--help` }
+            : {};
+        const headerText = (React.createElement("span", Object.assign({}, spanProps),
             title,
             this.getFormatters().map((formatter, i) => {
                 const { component: Formatter } = formatter;
@@ -955,15 +960,20 @@ class AccordionHeader extends React.Component {
                     " ",
                     React.createElement(Formatter, { that: that, idx: idx }))) || null;
             }),
-            hasHelp ? React.createElement(components_1.Help, null) : null));
-        const headerTextComponent = hasHelp ? React.createElement(components_1.TooltipComponent, { tooltip: uiSchema["ui:help"] }, headerText) : headerText;
+            hasHelp &&
+                React.createElement(React.Fragment, null,
+                    React.createElement(components_1.Help, { focusable: true, onFocus: this.onHelpFocus, onBlur: this.onHelpBlur, onClick: this.onHelpClick }),
+                    React.createElement("div", { id: `${that.props.idSchema.$id}_${idx}--help`, style: { display: "none" } }, uiSchema["ui:help"]))));
+        const { Tooltip } = this.context.theme;
+        const tooltip = React.createElement(Tooltip, null, uiSchema["ui:help"]);
+        const headerTextComponent = hasHelp ? React.createElement(components_1.OverlayTrigger, { placement: "right", overlay: tooltip, show: this.state && this.state.focused || undefined }, headerText) : headerText;
         const header = (React.createElement("div", { className: this.props.className, role: "tab", id: `${that.props.idSchema.$id}_${utils_1.getFormDataIndex(idx, that.props.uiSchema)}-header`, onClick: this.onHeaderClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave },
             React.createElement("div", { className: this.props.wrapperClassName },
                 headerTextComponent,
                 this.props.children)));
-        const { OverlayTrigger, Tooltip } = this.context.theme;
-        return utils_1.hasData(popupData) ? (React.createElement(OverlayTrigger, { placement: "left", overlay: React.createElement(Tooltip, { id: "nav-tooltip-" + idx },
+        return utils_1.hasData(popupData) ? (React.createElement(components_1.OverlayTrigger, { placement: "left", overlay: React.createElement(Tooltip, { id: "nav-tooltip-" + idx },
                 React.createElement(Popup, { data: popupData })) }, header)) : (header);
     }
 }
 AccordionHeader.contextType = ReactContext_1.default;
+AccordionHeader.state = { focused: false };

package/lib/components/templates/FieldTemplate.js

@@ -91,7 +91,7 @@ class _FieldTemplate extends React.Component {
                 inlineHelp ? React.createElement("div", { className: "pull-left" }, children) : children,
                 inlineHelp
                     ? (React.createElement("div", { className: "pull-left" },
-                        React.createElement(components_1.Help, { help: inlineHelp, id: `${htmlId}-inline-help` }))) : null),
+                        React.createElement(components_1.Help, { help: inlineHelp, id: `${htmlId}-inline-help`, focusable: true, standalone: true }))) : null),
             belowHelp ?
                 React.createElement("div", { className: "small text-muted", dangerouslySetInnerHTML: { __html: belowHelp } }) :
                 null,

package/lib/components/templates/TitleField.js

@@ -13,10 +13,20 @@ const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }
         return _titleFormatters[renderer](Object.assign(Object.assign({}, titleFormatter), { formData }));
     }).filter(i => i);
     const { Tooltip } = React.useContext(ReactContext_1.default).theme;
+    const [focused, setFocused] = React.useState(undefined);
+    const onHelpFocus = React.useCallback(() => {
+        setFocused(true);
+    }, []);
+    const onHelpBlur = React.useCallback(() => {
+        setFocused(false);
+    }, []);
+    const onHelpClick = React.useCallback((e) => {
+        e.preventDefault();
+    }, []);
     if (renderedFormatters.length === 0 && utils_1.isEmptyString(title)) {
         return null;
     }
-    const helpComponent = help ? React.createElement(components_1.Help, null) : null;
+    const helpComponent = help ? React.createElement(components_1.Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick }) : null;
     let titleTextContent = React.createElement("span", null,
         React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
         " ",
@@ -27,7 +37,7 @@ const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }
                 React.createElement("strong", { dangerouslySetInnerHTML: { __html: title } }),
                 React.createElement("br", null),
                 React.createElement("span", { dangerouslySetInnerHTML: { __html: help } }))));
-        titleTextContent = (React.createElement(components_1.OverlayTrigger, { placement: "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext }, titleTextContent));
+        titleTextContent = (React.createElement(components_1.OverlayTrigger, { placement: "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext, show: focused || undefined }, titleTextContent));
     }
     return (React.createElement("legend", { className: utils_1.classNames(className, help && "has-help"), style: style },
         React.createElement("span", null,

package/lib/components/widgets/AutosuggestWidget.js

@@ -1026,7 +1026,6 @@ class ReactAutosuggest extends React.Component {
         };
         this.onInputKeyDown = (e) => {
             let state, suggestion;
-            const { shortcuts } = this.props.formContext.services.keyHandler;
             switch (e.key) {
                 case "ArrowDown":
                     e.preventDefault();
@@ -1057,13 +1056,8 @@ class ReactAutosuggest extends React.Component {
                 case "Enter":
                     e.preventDefault();
                     suggestion = (this.props.suggestions || [])[this.state.focusedIdx];
-                    if (shortcuts.Enter) {
-                        this.props.formContext.setTimeout(() => {
-                            suggestion && this.onSuggestionSelected(suggestion);
-                        }, 0);
-                    }
-                    else {
-                        this.inputElem.blur();
+                    if (suggestion) {
+                        this.onSuggestionSelected(suggestion);
                     }
                     break;
                 case "Control":

package/lib/components/widgets/CheckboxWidget.d.ts

@@ -27,9 +27,9 @@ export default class CheckboxWidget extends React.Component<any, any, any> {
     getOptions: (props: any) => any;
     getToggleMode: (props: any) => boolean;
     onGroupKeyDown: any;
-    onTrueKeyDown: (e: any) => void;
-    onFalseKeyDown: (e: any) => void;
-    onUndefinedKeyDown: (e: any) => void;
+    onTrueKeyDown: any;
+    onFalseKeyDown: any;
+    onUndefinedKeyDown: any;
     toggle: (e: any) => void;
     formatValue(value: any, options: any, props: any): any;
 }

package/lib/components/widgets/CheckboxWidget.js

@@ -38,38 +38,28 @@ class CheckboxWidget extends React.Component {
             return Object.assign({ allowUndefined: true, showUndefined: true, invert: false, trueLabel: Yes, falseLabel: No, unknownLabel: Unknown, required: this.props.required }, utils_1.getUiOptions(props));
         };
         this.getToggleMode = (props) => {
-            const { allowUndefined, showUndefined, falseLabel, trueLabel } = this.getOptions(props);
+            const { allowUndefined, showUndefined } = this.getOptions(props);
             const displayUndefined = (allowUndefined && showUndefined);
-            const { Yes, No } = props.registry.formContext.translations;
-            return !displayUndefined && (trueLabel === Yes && falseLabel === No);
+            return !displayUndefined;
         };
         this.onGroupKeyDown = this.props.formContext.utils.keyboardClick((e) => {
             this.getToggleMode(this.props) && this.toggle(e);
-        }, [" "]);
-        this.onTrueKeyDown = (e) => {
-            const { key } = e;
-            if (key === " ") {
-                this.onChange(true);
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-        this.onFalseKeyDown = (e) => {
-            const { key } = e;
-            if (key === " ") {
-                this.onChange(false);
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-        this.onUndefinedKeyDown = (e) => {
-            const { key } = e;
-            if (key === " ") {
-                this.onChange(undefined);
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
+        });
+        this.onTrueKeyDown = this.props.formContext.utils.keyboardClick((e) => {
+            this.onChange(true);
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        this.onFalseKeyDown = this.props.formContext.utils.keyboardClick((e) => {
+            this.onChange(false);
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        this.onUndefinedKeyDown = this.props.formContext.utils.keyboardClick((e) => {
+            this.onChange(undefined);
+            e.preventDefault();
+            e.stopPropagation();
+        });
         this.toggle = (e) => {
             if (this.props.disabled || this.props.readonly) {
                 return;
@@ -112,15 +102,23 @@ class CheckboxWidget extends React.Component {
             tabIndex: (toggleMode || _disabled) ? undefined : 0
         };
         const tabTargetClass = "laji-form-checkbox-widget-tab-target";
+        const selectedValueGlyph = React.createElement("span", { className: "laji-form-checkbox-selected-value-glyph" });
+        const unselectedValueGlyph = React.createElement("span", { className: "laji-form-checkbox-unselected-value-glyph" });
         const checkbox = (React.createElement(ButtonToolbar, { className: utils_1.classNames("laji-form-checkbox-buttons", toggleMode && "desktop-layout") },
             React.createElement(ToggleButtonGroup, Object.assign({ ref: this.groupRef, type: "radio", value: [_value], name: this.props.id, onChange: this.onButtonGroupChange, onKeyDown: this.onGroupKeyDown, className: utils_1.classNames(toggleMode && tabTargetClass) }, commonProps, { tabIndex: (toggleMode && !_disabled) ? 0 : undefined }),
-                React.createElement(ToggleButton, Object.assign({ id: `${id}-true`, ref: this.trueRef, value: true, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === false && "laji-form-hide-btn-label", _value === true && tabTargetClass), onKeyDown: this.onTrueKeyDown }, commonProps), trueLabel),
-                React.createElement(ToggleButton, Object.assign({ id: `${id}-false`, ref: this.falseRef, value: false, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === true && "laji-form-hide-btn-label", _value === false && tabTargetClass), onKeyDown: this.onFalseKeyDown }, commonProps), falseLabel),
+                React.createElement(ToggleButton, Object.assign({ id: `${id}-true`, ref: this.trueRef, value: true, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(_value === true && tabTargetClass), onKeyDown: this.onTrueKeyDown }, commonProps),
+                    _value === true ? selectedValueGlyph : unselectedValueGlyph,
+                    trueLabel),
+                React.createElement(ToggleButton, Object.assign({ id: `${id}-false`, ref: this.falseRef, value: false, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(_value === false && tabTargetClass), onKeyDown: this.onFalseKeyDown }, commonProps),
+                    _value === false ? selectedValueGlyph : unselectedValueGlyph,
+                    falseLabel),
                 (displayUndefined ?
-                    React.createElement(ToggleButton, Object.assign({ id: `${id}-undefined`, ref: this.undefinedRef, value: "undefined", className: utils_1.classNames(value === undefined && tabTargetClass) }, commonProps, { onKeyDown: this.onUndefinedKeyDown }), unknownLabel) : null))));
+                    React.createElement(ToggleButton, Object.assign({ id: `${id}-undefined`, ref: this.undefinedRef, value: "undefined", className: utils_1.classNames(value === undefined && tabTargetClass) }, commonProps, { onKeyDown: this.onUndefinedKeyDown }),
+                        _value === "undefined" ? selectedValueGlyph : unselectedValueGlyph,
+                        unknownLabel) : null))));
         const { Label } = this.props.formContext;
         return !hasLabel ? checkbox : React.createElement(React.Fragment, null,
-            React.createElement(Label, { label: label, required: required, uiSchema: this.props.uiSchema, contextId: this.props.formContext.contextId }),
+            React.createElement(Label, { label: label, required: required, uiSchema: this.props.uiSchema, registry: this.props.registry, id: this.props.id }),
             checkbox);
     }
     formatValue(value, options, props) {

package/lib/components/widgets/TextareaWidget.d.ts

@@ -26,7 +26,6 @@ export default class TextareaWidget extends React.Component<any, any, any> {
             value: any;
         };
     }) => void;
-    onKeyDown: (e: any) => void;
 }
 import * as React from "react";
 import * as PropTypes from "prop-types";

package/lib/components/widgets/TextareaWidget.js

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const PropTypes = require("prop-types");
-const utils_1 = require("../../utils");
-const components_1 = require("../components");
 const Context_1 = require("../../Context");
 const ReactContext_1 = require("../../ReactContext");
-const utils_2 = require("../../utils");
+const utils_1 = require("../../utils");
 class TextareaWidget extends React.Component {
     constructor(props) {
         super(props);
@@ -35,7 +33,7 @@ class TextareaWidget extends React.Component {
                     if (this.timeout)
                         clearTimeout(this.timeout);
                     this.timeout = this.props.formContext.setTimeout(() => {
-                        this.props.onChange(value === "" ? utils_2.getUiOptions(this.props).emptyValue : value);
+                        this.props.onChange(value === "" ? utils_1.getUiOptions(this.props).emptyValue : value);
                     }, 1000);
                 }
             });
@@ -43,24 +41,9 @@ class TextareaWidget extends React.Component {
         this._onChange = ({ target: { value } }) => {
             this.onChange(value);
         };
-        this.onKeyDown = (e) => {
-            const inputAllowed = !this.props.disabled && !this.props.readonly;
-            const isCtrlEnter = e.ctrlKey && e.key === "Enter";
-            if (this.state.enterReserved && inputAllowed && isCtrlEnter) {
-                this.onChange(this.state.value + "\n");
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
         this.state = this.getStateFromProps(props);
         this.textareaRef = React.createRef();
         this._context = Context_1.default(props.formContext.contextId);
-        Object.keys(props.formContext.services.keyHandler.shortcuts).some(keyCombo => {
-            if (keyCombo === "Enter") {
-                //	// Direct mutation should be ok in constructor.
-                this.state.enterReserved = true; // eslint-disable-line react/no-direct-mutation-state
-            }
-        });
     }
     UNSAFE_componentWillReceiveProps(props) {
         this.setState(this.getStateFromProps(props));
@@ -69,8 +52,7 @@ class TextareaWidget extends React.Component {
         const { id, options, placeholder, disabled, readonly, autofocus } = this.props;
         const { value } = this.state;
         const { required = this.props.required } = options;
-        const textarea = React.createElement("textarea", { id: id, className: "form-control", value: typeof value === "undefined" ? "" : value, placeholder: placeholder, required: required, disabled: disabled, readOnly: readonly, autoFocus: autofocus, rows: options.rows, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this._onChange, onKeyDown: this.onKeyDown });
-        return this.state.enterReserved ? (React.createElement(components_1.TooltipComponent, { tooltip: `${utils_1.stringifyKeyCombo("ctrl+Enter")} ${this.props.formContext.translations.textareaHint}`, placement: "bottom" }, textarea)) : textarea;
+        return React.createElement("textarea", { id: id, className: "form-control", value: typeof value === "undefined" ? "" : value, placeholder: placeholder, required: required, disabled: disabled, readOnly: readonly, autoFocus: autofocus, rows: options.rows, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this._onChange, onKeyDown: this.onKeyDown });
     }
 }
 exports.default = TextareaWidget;

package/lib/utils.js

@@ -204,9 +204,10 @@ function isSelect(schema) {
 exports.isSelect = isSelect;
 const SWITCH_CLASS = "laji-form-checkbox-widget-tab-target";
 const IMG_ADD_CLASS = "laji-form-drop-zone";
-const inputTypes = ["input", "select", "textarea"];
 const tabbableSelectors = [
-    ...inputTypes,
+    "input",
+    "select",
+    "textarea",
     `.${SWITCH_CLASS}`,
     `.${IMG_ADD_CLASS}`
 ].map(type => `${type}:not([type="hidden"]):not(:disabled):not([readonly]):not([type="file"]):not(.leaflet-control-layers-selector):not(.laji-map-input)`);
@@ -221,7 +222,7 @@ function getTabbableFields(elem, reverse) {
 exports.getTabbableFields = getTabbableFields;
 function isTabbableInput(elem) {
     return elem.id.match(/^_laji-form_/)
-        || inputTypes.includes(elem.tagName.toLowerCase())
+        || ["input", "select", "textarea"].includes(elem.tagName.toLowerCase())
         || elem.className.includes(SWITCH_CLASS)
         || elem.className.includes(IMG_ADD_CLASS);
 }
@@ -301,7 +302,18 @@ exports.getNextInputInInputs = getNextInputInInputs;
 const getNextInput = (formContext) => (inputElem, reverseDirection = false) => {
     const formElem = react_dom_1.findDOMNode(formContext.formRef.current);
     const fields = getTabbableFields(formElem);
-    return formContext.utils.getNextInputInInputs(inputElem, reverseDirection, fields);
+    const input = formContext.utils.getNextInputInInputs(inputElem, reverseDirection, fields);
+    if (!input) {
+        // Try to find a "tabbable element" from inside the nearest parent schema element.
+        const nearestParentField = findNearestParentSchemaElem(inputElem);
+        if (nearestParentField) {
+            const nearestTabbableElem = nearestParentField.querySelector(tabbableSelectorsQuery);
+            if (nearestTabbableElem) {
+                return formContext.utils.getNextInputInInputs(nearestTabbableElem, reverseDirection, fields);
+            }
+        }
+    }
+    return input;
 };
 exports.getNextInput = getNextInput;
 const focusNextInput = (formContext) => (reverseDirection = false) => {
@@ -313,12 +325,10 @@ const focusNextInput = (formContext) => (reverseDirection = false) => {
     if (uiSchema.autoFocus === false) {
         return false;
     }
-    const width = pixelsToBsSize(window.outerWidth);
-    if (width === "xs")
-        return false;
     const field = formContext.utils.getNextInput(document.activeElement, reverseDirection);
     if (field) {
         field.focus();
+        scrollIntoViewIfNeeded(field, formContext.topOffset, formContext.bottomOffset);
         return true;
     }
     return false;
@@ -445,7 +455,7 @@ const _keyboardClick = ({ contextId }) => (fn, keys = [" ", "Enter"]) => {
             const { shortcuts } = Context_1.default(contextId);
             keys = keys.filter(k => !(shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts[k]));
         }
-        if (keys.every(k => e.key !== k)) {
+        if (e.altKey || e.ctrlKey || keys.every(k => e.key !== k)) {
             return;
         }
         e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.41",
+  "version": "15.1.42",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",