Skip to content

Commit 4fe4f5a

Browse files
unazkounazko
authored
fix(ui5-file-uploader): react on focus out only when needed (#11989)
The ui5-tokenizer should be expanded when the focus is on the ui5-file-uploader and it should be collapsed when the focus is out of the ui5-file-uploader. Issue: - The ui5-tokenizer's expand property got updated on focus out of the ui5-tokenizer or the native type file filed, or even on focus out of a token. Solution: - Now the ui5-tokenizer's expand property is getting updated only on focus out of the ui5-file uploader. The ui5-tokenizer expand property won't change If any of the ui5-file-uploader internal elements hosts the focus. Additionally: - The file size limit playground sample was improved to use the valueState property and the valueStateMessage slot instead of ui5-messagestrip component instance.
1 parent 702150b commit 4fe4f5a

File tree

6 files changed

+29
-32
lines changed

6 files changed

+29
-32
lines changed

‎packages/main/src/FileUploader.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,10 @@ class FileUploader extends UI5Element implements IFormInputElement {
400400
}
401401

402402
_onfocusout() {
403+
if (this.matches(":focus-within")) {
404+
return;
405+
}
406+
403407
this.focused = false;
404408
if (this._tokenizer) {
405409
this._tokenizer.expanded = this._tokenizerOpen;
@@ -482,7 +486,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
482486
this._input.value = "";
483487
}
484488

485-
this._tokenizerOpen = this._tokenizer?.open || false;
489+
this._tokenizerOpen = this._tokenizer ? this._tokenizer.open : false;
486490

487491
if (this.hideInput && this.content.length > 0) {
488492
this.content.forEach(element => {

‎packages/website/docs/_samples/main/FileUploader/Basic/sample.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010

1111
<body style="background-color: var(--sapBackgroundColor)">
1212
<!-- playground-fold-end -->
13-
<ui5-label for="single-file-uploader">Upload a single file:</ui5-label>
14-
<ui5-file-uploader id="single-file-uploader"></ui5-file-uploader>
13+
<div style="height: 100px">
14+
<ui5-label for="single-file-uploader">Upload a single file:</ui5-label>
15+
<ui5-file-uploader id="single-file-uploader"></ui5-file-uploader>
16+
</div>
1517
<!-- playground-fold -->
1618
<script type="module" src="main.js"></script>
1719
</body>

‎packages/website/docs/_samples/main/FileUploader/FileSizeLimit/main.js

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,18 @@
11
import "@ui5/webcomponents/dist/FileUploader.js";
22
import "@ui5/webcomponents/dist/Button.js";
3-
import "@ui5/webcomponents/dist/MessageStrip.js";
43

54
import "@ui5/webcomponents-icons/dist/upload.js";
65

76
const fileUploader = document.querySelector("#max-file-size-uploader");
8-
const resultDiv = document.querySelector("#file-exceed-result");
97

108
fileUploader.addEventListener("file-size-exceed", function (event) {
119
const uploaderMaxSize = fileUploader.maxFileSize;
1210
const filesData = event.detail.filesData;
11+
const fileNames = filesData.map(fileData => fileData.fileName).join(", ");
12+
fileUploader.valueState = "Negative";
13+
fileUploader.innerHTML = `<div slot="valueStateMessage">${fileNames} exceeds the limit of ${uploaderMaxSize} MB.</div>`;
14+
});
1315

14-
filesData.forEach(fileData => {
15-
const fileName = fileData.fileName;
16-
const fileSizeDifference = (fileData.fileSize - uploaderMaxSize).toFixed(2);
17-
const errorMessage = "Can't upload file '" + fileName + "' because it exceeds the maximum upload size by " + fileSizeDifference + " MB.";
18-
19-
const messageStrip = document.createElement('ui5-message-strip');
20-
messageStrip.addEventListener("close", handleMessageClose);
21-
resultDiv.append(messageStrip);
22-
23-
messageStrip.design = "Negative";
24-
messageStrip.innerHTML = errorMessage;
25-
})
26-
})
27-
28-
function handleMessageClose(event) {
29-
event.target.remove();
30-
}
16+
fileUploader.addEventListener("change", function (event) {
17+
fileUploader.valueState = "None";
18+
});

‎packages/website/docs/_samples/main/FileUploader/FileSizeLimit/sample.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@
1010

1111
<body style="background-color: var(--sapBackgroundColor)">
1212
<!-- playground-fold-end -->
13-
14-
<ui5-label for="max-file-size-uploader">Upload files up to 2 MB:</ui5-label>
15-
<ui5-file-uploader max-file-size="2" id="max-file-size-uploader" multiple></ui5-file-uploader>
16-
17-
<div id="file-exceed-result"></div>
18-
13+
<div style="height: 300px">
14+
<ui5-label for="max-file-size-uploader">Upload files up to 2 MB:</ui5-label>
15+
<ui5-file-uploader max-file-size="2" id="max-file-size-uploader" multiple></ui5-file-uploader>
16+
</div>
17+
1918
<!-- playground-fold -->
2019
<script type="module" src="main.js"></script>
2120
</body>

‎packages/website/docs/_samples/main/FileUploader/FilesFilter/sample.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
<body style="background-color: var(--sapBackgroundColor)">
1212
<!-- playground-fold-end -->
1313

14-
<ui5-label for="image-uploader">Upload images:</ui5-label>
15-
<ui5-file-uploader id="image-uploader" accept="image/*" multiple></ui5-file-uploader>
14+
<div style="height: 100px">
15+
<ui5-label for="image-uploader">Upload images:</ui5-label>
16+
<ui5-file-uploader id="image-uploader" accept="image/*" multiple></ui5-file-uploader>
17+
</div>
1618

1719
<div id="result"></div>
1820
<!-- playground-fold -->

‎packages/website/docs/_samples/main/FileUploader/MultipleFiles/sample.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
<body style="background-color: var(--sapBackgroundColor)">
1212
<!-- playground-fold-end -->
1313

14-
<ui5-label for="multiple-files-uploader">Choose files:</ui5-label>
15-
<ui5-file-uploader id="multiple-files-uploader" multiple></ui5-file-uploader>
14+
<div style="height: 100px">
15+
<ui5-label for="multiple-files-uploader">Choose files:</ui5-label>
16+
<ui5-file-uploader id="multiple-files-uploader" multiple></ui5-file-uploader>
17+
</div>
1618

1719
<!-- playground-fold -->
1820
<script type="module" src="main.js"></script>

0 commit comments

Comments
 (0)