Skip to content

Select: Fix (#11392 & #12327) #12329

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

Merged
ziyoung merged 6 commits into from
Oct 17, 2018
Merged

Select: Fix (#11392 & #12327) #12329

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6d833ce
Select: Fix (#11392 & #12327) Writing space become small when collaps…
akki-jat Aug 10, 2018
21475c6
Changes as IE & Edge dosen't support display: contents
akki-jat Aug 14, 2018
f69bad3
Revert "Changes as IE & Edge dosen't support display: contents"
akki-jat Aug 17, 2018
1f257ac
Fixed issue - input going in new line even if there is space (collaps…
akki-jat Aug 17, 2018
b77e593
Made calculating with dynamic (replaced static 208 with el-select__ta…
akki-jat Oct 9, 2018
7263e47
Select: Fixed Bug - Extra Height
akki-jat Oct 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/select/src/select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
class="el-select__tags"
v-if="multiple"
ref="tags"
:style="{ 'max-width': inputWidth - 32 + 'px' }">
:style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
<span v-if="collapseTags && selected.length">
<el-tag
:closable="!selectDisabled"
Expand Down Expand Up @@ -64,7 +64,7 @@
v-model="query"
@input="debouncedQueryChange"
v-if="filterable"
:style="{ width: inputLength + 'px', 'max-width': inputWidth - 42 + 'px' }"
Copy link
Contributor

@ziyoung ziyoung Aug 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When collapse-tags is set to true, there are some problems.
kapture 2018-08-16 at 11 25 36

Maybe you should not modify this line.

Copy link
Contributor Author

@akki-jat akki-jat Aug 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ziyoung can you tell me your configuration?
Because its running fine on my side.

You can check

selement_select_gif

Copy link
Contributor

@ziyoung ziyoung Aug 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

// options[2]
{
  value: "Option311111",
  label: "Option311111"
}

kapture 2018-08-17 at 11 19 30

  1. click option2
  2. click option31111
  3. click option2

Copy link
Contributor Author

@akki-jat akki-jat Aug 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ziyoung now check.

Copy link
Contributor

@ziyoung ziyoung Oct 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akki-jat have you fixed it?
kapture 2018-10-09 at 15 36 08

Copy link
Contributor Author

@akki-jat akki-jat Oct 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wacky6 / @ziyoung test it again after taking latest.

Copy link
Contributor

@wacky6 wacky6 Oct 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's still broken: https://jsfiddle.net/0fj6tpvo/2/

.el-input's input height is causing the problem.

Copy link
Contributor

@ziyoung ziyoung Oct 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akki-jat I test it on my computer and this issue isn't fixed. Maybe this is caused ElTag component. When I use a function component to wrap ElTag, it works fine.

Copy link
Contributor Author

@akki-jat akki-jat Oct 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ziyoung this problem caused by resetInputHeight() function. When we remove a tag this function is call to determine the input height but when this method calculates the height the ( +1 ) tag is not removed ( even if there are no extra selection ). So, when it calculates height it also takes +1 tag into consideration.

Note: UI updates after resetInputHeight() function

Copy link
Contributor

@ziyoung ziyoung Oct 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akki-jat @wacky6 after I optimize ElTag component https://github.com/ElemeFE/element/pull/13069/files , it works fine on my computer.
kapture 2018-10-16 at 19 35 49

:style="{ 'flex-grow': '1', width: '30%' }"
ref="input">
</div>
<el-input
Expand Down
1 change: 0 additions & 1 deletion packages/theme-chalk/src/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@
z-index: $--index-normal;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
Copy link
Contributor

@ziyoung ziyoung Aug 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following two lines can be deleted.

flex-wrap: wrap;
}
Expand Down