Web: Client: CreateEditRoomDialog: Added ref to InputParam
This commit is contained in:
parent
772ccc78bc
commit
2bda6327e9
@ -17,52 +17,58 @@ const StyledInputParam = styled(StyledParam)`
|
||||
}
|
||||
`;
|
||||
|
||||
const InputParam = ({
|
||||
id,
|
||||
title,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
isDisabled,
|
||||
isValidTitle,
|
||||
errorMessage,
|
||||
isAutoFocussed,
|
||||
}) => {
|
||||
return (
|
||||
<StyledInputParam>
|
||||
<Label
|
||||
title={title}
|
||||
className="input-label"
|
||||
display="display"
|
||||
htmlFor={id}
|
||||
text={title}
|
||||
/>
|
||||
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={!isValidTitle}
|
||||
errorMessage={errorMessage}
|
||||
>
|
||||
<TextInput
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
scale
|
||||
placeholder={placeholder}
|
||||
tabIndex={2}
|
||||
isDisabled={isDisabled}
|
||||
hasError={!isValidTitle}
|
||||
isAutoFocussed={isAutoFocussed}
|
||||
const InputParam = React.forwardRef(
|
||||
(
|
||||
{
|
||||
id,
|
||||
title,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
isDisabled,
|
||||
isValidTitle,
|
||||
errorMessage,
|
||||
isAutoFocussed,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<StyledInputParam>
|
||||
<Label
|
||||
title={title}
|
||||
className="input-label"
|
||||
display="display"
|
||||
htmlFor={id}
|
||||
text={title}
|
||||
/>
|
||||
</FieldContainer>
|
||||
</StyledInputParam>
|
||||
);
|
||||
};
|
||||
|
||||
<FieldContainer
|
||||
isVertical={true}
|
||||
labelVisible={false}
|
||||
hasError={!isValidTitle}
|
||||
errorMessage={errorMessage}
|
||||
>
|
||||
<TextInput
|
||||
forwardedRef={ref}
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
scale
|
||||
placeholder={placeholder}
|
||||
tabIndex={2}
|
||||
isDisabled={isDisabled}
|
||||
hasError={!isValidTitle}
|
||||
isAutoFocussed={isAutoFocussed}
|
||||
/>
|
||||
</FieldContainer>
|
||||
</StyledInputParam>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
InputParam.defaultProps = {
|
||||
isValidTitle: true,
|
||||
|
@ -13,21 +13,20 @@ const TagDropdown = ({
|
||||
setTagInputValue,
|
||||
createTagLabel,
|
||||
isDisabled,
|
||||
inputRef,
|
||||
}) => {
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
document
|
||||
.getElementById("shared_tags-input")
|
||||
.addEventListener("keyup", onKeyPress);
|
||||
|
||||
return () => document.removeEventListener("keyup", onKeyPress);
|
||||
});
|
||||
|
||||
const onKeyPress = (e) => e.key === "Enter" && addNewTag();
|
||||
|
||||
useEffect(() => {
|
||||
inputRef?.current?.addEventListener("keyup", onKeyPress);
|
||||
|
||||
return () => inputRef?.current?.removeEventListener("keyup", onKeyPress);
|
||||
}, [onKeyPress]);
|
||||
|
||||
const chosenTags = tagHandler.tags.map((tag) => tag.name);
|
||||
|
||||
const tagsForDropdown = tagHandler.fetchedTags.filter(
|
||||
@ -41,12 +40,13 @@ const TagDropdown = ({
|
||||
};
|
||||
|
||||
const onClickOutside = (e) => {
|
||||
if (!e) return;
|
||||
if (e.target.id === "shared_tags-input") return;
|
||||
document.getElementById("shared_tags-input").blur();
|
||||
/* if (!e) return;
|
||||
if (e.target.id === "shared_tags-input") return; */
|
||||
inputRef?.current?.blur();
|
||||
};
|
||||
|
||||
const addNewTag = () => {
|
||||
if (tagInputValue?.trim() === "") return;
|
||||
tagHandler.addNewTag(tagInputValue);
|
||||
setTagInputValue("");
|
||||
onClickOutside();
|
||||
@ -119,6 +119,7 @@ const TagDropdown = ({
|
||||
hasItems={!!dropdownItems.length}
|
||||
clickOutsideAction={onClickOutside}
|
||||
withBackdrop={false}
|
||||
enableKeyboardEvents={false}
|
||||
>
|
||||
{dropdownItems}
|
||||
</StyledDropDown>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import TagList from "./TagList";
|
||||
@ -27,6 +27,7 @@ const StyledTagInput = styled.div`
|
||||
`;
|
||||
|
||||
const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
|
||||
const inputRef = useRef();
|
||||
const [tagInput, setTagInput] = useState("");
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
@ -49,6 +50,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
|
||||
hasTags={!!tagHandler.tags.length}
|
||||
>
|
||||
<InputParam
|
||||
ref={inputRef}
|
||||
id="shared_tags-input"
|
||||
title={`${t("Common:Tags")}:`}
|
||||
placeholder={t("TagsPlaceholder")}
|
||||
@ -60,6 +62,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
|
||||
/>
|
||||
|
||||
<TagDropdown
|
||||
inputRef={inputRef}
|
||||
open={isDropdownOpen}
|
||||
tagHandler={tagHandler}
|
||||
tagInputValue={tagInput}
|
||||
|
Loading…
Reference in New Issue
Block a user