Skip to content
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.

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

focusOnSelect when Rtl is True not work #3787

Closed
fa-te970 opened this issue Jun 5, 2019 · 1 comment
Closed

focusOnSelect when Rtl is True not work #3787

fa-te970 opened this issue Jun 5, 2019 · 1 comment

Comments

@fa-te970
Copy link

fa-te970 commented Jun 5, 2019

Hi
when i use below settings, My slick slider not work when I click it. please help me to solve it:

  infinite: false,
  slidesToShow: 6,
  slidesToScroll: 2,
  speed: 500,
  rtl: true,
  focusOnSelect: true,
`    return (
      <div className="mySlider text-center" dir="ltr">
        <div className={`${calendarContainer}`}>
                    {this.handleSlideToShow()}
          <Slider ref={slider => (this.slider = slider)} {...sliderSettings}>
            {this.renderFlightsList()
            }
          </Slider>
        </div>
      </div>
    );
handleSlideToShow() ....
let list = [];
    for (let i = 0; i < days.length; i += 1) {
      list = [
        ...list,
        <div
          key={i.toString()}
          className="d-inline"
          onKeyDown={() => { }}
          role="button"
          onClick={() => this.handleClickDay(i)}
          tabIndex={i}
        >
          <div key={i.toString()} className={`${days[i].active ? selectedBox : ''}  flex-fill px-1 py-4 text-sm text-nowrap`}>
            <div className={`${days[i].price === (minimumPrice) ? 'bg-violet' : 'bg-dark-gray'} d-flex flex-column flex-xl-row lighter-rounded-box text-white`}>
              <div className="p-1 d-flex flex-fill align-items-center">
                <div className="w-100">
                  <div className={day}>
                    {dayName[days[i].day - 1]}
                  </div>
                  <div>
                    {days[i].date}
                  </div>
                </div>
              </div>
              <div className={`${priceBox} ${days[i].price === (minimumPrice) ? 'text-violet' : 'text-black'} bg-white lighter-rounded-box p-1 d-flex align-items-center`}>
                <div className="w-100">
                  <div className="text-xl">
                    {Math.trunc(days[i].price / 10000)}
                  </div>
                  <div className="text-sm">
...
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        ,
      ];
    }
return list;
@ahmadalfy
Copy link
Collaborator

Can you recreate a fiddle with the issue? I created the rtl option so I am interested in helping

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants