This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch fix/forms-style in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 7442d0f7b18d9cf692494f66eb2736eb03376eec Author: shuai <[email protected]> AuthorDate: Wed May 29 10:36:52 2024 +0800 fix: taSelector component placeholder style optimization --- ui/src/components/TagSelector/index.scss | 8 ++++++++ ui/src/components/TagSelector/index.tsx | 9 ++++++++- ui/src/pages/Review/components/EditPostModal/index.tsx | 10 ++-------- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/ui/src/components/TagSelector/index.scss b/ui/src/components/TagSelector/index.scss index 1a53ac42..5d26102e 100644 --- a/ui/src/components/TagSelector/index.scss +++ b/ui/src/components/TagSelector/index.scss @@ -61,6 +61,14 @@ white-space: nowrap; } + .a-placeholder-width { + display: inline-block; + position: absolute; + height: 0; + overflow: hidden; + max-width: calc(100% - 40px); + } + } .tag-selector-wrap--focus { diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx index 25ec293d..6b10c236 100644 --- a/ui/src/components/TagSelector/index.tsx +++ b/ui/src/components/TagSelector/index.tsx @@ -328,13 +328,19 @@ const TagSelector: FC<IProps> = ({ useEffect(() => { // set width of tag Form.Control const ele = document.querySelector('.a-input-width') as HTMLElement; + const elePlaceholder = document.querySelector( + '.a-placeholder-width', + ) as HTMLElement; if (ele.offsetWidth > 60) { inputRef.current?.setAttribute( 'style', `width:${ele.offsetWidth + 16}px`, ); } else { - inputRef.current?.setAttribute('style', 'width: 60px'); + inputRef.current?.setAttribute( + 'style', + `width: ${elePlaceholder.offsetWidth + 7}px`, + ); } }, [searchValue]); @@ -392,6 +398,7 @@ const TagSelector: FC<IProps> = ({ /> )} <span className="a-input-width">{searchValue}</span> + <span className="a-placeholder-width">{t('add_btn')}</span> </div> </div> <Dropdown.Menu id="a-dropdown-menu" className="w-100" show={showMenu}> diff --git a/ui/src/pages/Review/components/EditPostModal/index.tsx b/ui/src/pages/Review/components/EditPostModal/index.tsx index 9e7ae5e9..5a4529fd 100644 --- a/ui/src/pages/Review/components/EditPostModal/index.tsx +++ b/ui/src/pages/Review/components/EditPostModal/index.tsx @@ -346,11 +346,6 @@ const Index: FC<Props> = ({ {objectType === 'question' && ( <Form.Group controlId="tags" className="my-3"> <Form.Label>{t('form.fields.tags.label')}</Form.Label> - <Form.Control - defaultValue={JSON.stringify(formData.tags.value)} - isInvalid={formData.tags.isInvalid} - hidden - /> <TagSelector value={formData.tags.value} onChange={(value) => { @@ -360,10 +355,9 @@ const Index: FC<Props> = ({ }} showRequiredTag maxTagLength={5} + isInvalid={formData.tags.isInvalid} + errMsg={formData.tags.errorMsg} /> - <Form.Control.Feedback type="invalid"> - {formData.tags.errorMsg} - </Form.Control.Feedback> </Form.Group> )}
