2016-02-23 15 views
11

Trường chọn có thể được tìm thấy tại đây: in the Material-UI demoLàm cách nào để mở một trường Chọn tài liệu-giao diện người dùng một cách có lập trình?

Phương pháp này được thừa hưởng từ các lớp menu/popover nhưng tôi không thể tìm ra cách 'mở' khi sự kiện onFocus kích hoạt. Điều này sẽ giải quyết vấn đề liên quan đến khả năng sử dụng bàn phím của tôi! Cảm ơn nhiều.

+1

Nhìn vào tài liệu được liên kết, không có gì để tự động tập trung hoặc mở danh sách lựa chọn. Trong thực tế nó được đưa ra như một vấn đề trên GitHub nhiều hơn một lần. https://github.com/callemall/material-ui/issues?utf8=%E2%9C%93&q=selectfield+focus+is%3Aopen –

+0

Cảm ơn bạn David. Có rất nhiều vấn đề mở thực sự. Tôi đã hy vọng có một số cách trixy để thi đua sự kiện click khi onDocus xảy ra. Nếu con chuột có thể mở nó tại sao tôi không thể làm nó tổng hợp? Nỗ lực của tôi đã thất bại ở đó ... – heorling

+0

Tôi đoán là bạn sẽ phải chờ xem liệu hành vi này có kết thúc trong trường Chọn của nhánh @next hay không. Trích dẫn từ ROADMAP.md của họ: "Các tính năng mới dựa trên v0.16.x có mức độ ưu tiên thấp và rất có thể sẽ không được xem xét và cũng không được hợp nhất" – Dani

Trả lời

1

Bạn có thể thực hiện việc này bằng cách truy cập nút DOM của nút mũi tên xuống và kích hoạt sự kiện nhấp chuột trên đó một cách thủ công.

Ví dụ hoạt động trên Mac Chrome trên trang web demo, thông qua giao diện điều khiển, sau khi thêm trường id một 'mySelect' để chọn yếu tố lĩnh vực DOM để truy cập dễ dàng hơn:

// Initialize a click event (mouseup seem more cross browser) 
var evt = document.createEvent('MouseEvents'); 
evt.initEvent('mouseup', true, false); 
// The down arrow elment is the only SVG element un the select 
var elm = document.querySelector('#mySelect svg') 
// Dispatch the event (reusable) 
elm.dispatchEvent(evt); 

Nếu giải pháp này phù hợp với mã của bạn , bạn sẽ phải kiểm tra trình duyệt chéo/nền tảng đầy đủ để tạo sự kiện thích hợp và chọn phần tử mũi tên (querySelector không khả dụng ở mọi nơi, mặc dù it's quite OK now)

Các vấn đề liên quan