ionic-team / ionic-team/ionic-framework
bug: [vue] weird behaviour for ion-input focus within ion-modal
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
v8.x
### Current Behavior
I have created ion-modal and used the `modelController` to present the model (just copied the code from [here](https://ionicframework.com/docs/api/modal#controller-modals),
the `Modal.vue` contains multiple` ion-input` and is triggered as
```
const modal = await modalController.create({
component: Modal,
initialBreakpoint: 0.5
});
modal.present();
```
when setting the `initialBreakpoint` the focus randomly moves the ion-inputs within the modal, when removing completely the `initialBreakpoint` it works fine.
see attached video
https://github.com/user-attachments/assets/c0dc01cc-e2f7-46a6-94c9-bcb69efb045d
### Expected Behavior
- moving between the ion-inputs should be smooth and focus should be set accordingly.
### Steps to Reproduce
1. create a fresh new installation
2. copy the implementation from [here](https://ionicframework.com/docs/api/modal#controller-modals)
3. set `initialBreakpoint` to 0.5
### Code Reproduction URL
https://ionicframework.com/docs/api/modal#controller-modals
### Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.0
Capacitor:
Capacitor CLI : 6.1.2
@capacitor/android : not installed
@capacitor/core : 6.1.2
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v22.9.0 (/opt/homebrew/Cellar/node/22.9.0/bin/node)
npm : 10.8.3
OS : macOS Unknown
### Additional Information
_No response_
Hướng dẫn đóng góp
Hướng nghiên cứu
Start with the controller modal example linked in the issue and the Modal.vue component containing multiple ion-input elements. Reproduce the behavior in a fresh installation with initialBreakpoint set to 0.5, then compare it with the same modal without that setting; done means moving between inputs keeps focus smooth and correctly assigned.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 40/100