Skip to content

Commit 8433840

Browse files
taneliangtaneliang
authored
Real minor fixes (#713)
* Add key prop to global search sem badges * Fix warning: You tried to return focus to but it is not in the DOM anymore * Fix bad scroll perf on Safari on macOS
1 parent 2bd8d93 commit 8433840

File tree

4 files changed

+106
-98
lines changed

4 files changed

+106
-98
lines changed

‎www/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"react-dom": "^16.2.0",
121121
"react-feather": "1.0.8",
122122
"react-helmet": "^5.2.0",
123-
"react-modal": "^3.1.7",
123+
"react-modal": "^3.1.10",
124124
"react-qr-svg": "^2.1.0",
125125
"react-redux": "^5.0.5",
126126
"react-router-dom": "^4.2.2",

‎www/src/js/views/layout/GlobalSearch.jsx

Lines changed: 97 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -121,37 +121,39 @@ class GlobalSearch extends Component<Props, State> {
121121
<div className={styles.container}>
122122
{searchForm}
123123

124-
<div className={styles.selectList}>
125-
<div className={styles.noResults}>
126-
<Help />
127-
<p>
128-
No results found for{' '}
129-
<strong className={styles.searchTerm}>&quot;{inputValue}&quot;</strong>
130-
</p>
131-
<p>
132-
Try searching all{' '}
133-
<button
134-
{...getItemProps({
135-
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
136-
})}
137-
className={classnames('btn btn-inline', {
138-
[styles.selected]: highlightedIndex === 0,
139-
})}
140-
>
141-
modules
142-
</button>{' '}
143-
or{' '}
144-
<button
145-
{...getItemProps({
146-
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
147-
})}
148-
className={classnames('btn btn-inline', {
149-
[styles.selected]: highlightedIndex === 1,
150-
})}
151-
>
152-
venues
153-
</button>
154-
</p>
124+
<div className={styles.selectListContainer}>
125+
<div className={styles.selectList}>
126+
<div className={styles.noResults}>
127+
<Help />
128+
<p>
129+
No results found for{' '}
130+
<strong className={styles.searchTerm}>&quot;{inputValue}&quot;</strong>
131+
</p>
132+
<p>
133+
Try searching all{' '}
134+
<button
135+
{...getItemProps({
136+
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
137+
})}
138+
className={classnames('btn btn-inline', {
139+
[styles.selected]: highlightedIndex === 0,
140+
})}
141+
>
142+
modules
143+
</button>{' '}
144+
or{' '}
145+
<button
146+
{...getItemProps({
147+
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
148+
})}
149+
className={classnames('btn btn-inline', {
150+
[styles.selected]: highlightedIndex === 1,
151+
})}
152+
>
153+
venues
154+
</button>
155+
</p>
156+
</div>
155157
</div>
156158
</div>
157159
</div>
@@ -166,80 +168,84 @@ class GlobalSearch extends Component<Props, State> {
166168
<div className={styles.container}>
167169
{searchForm}
168170

169-
<div className={styles.selectList}>
170-
{hasModules && (
171-
<Fragment>
172-
<div
173-
{...getItemProps({
174-
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
175-
})}
176-
className={classnames(styles.selectHeader, {
177-
[styles.selected]: highlightedIndex === 0,
178-
})}
179-
>
180-
<span className={styles.headerName}>Modules</span>
181-
<span className="btn-svg">
182-
View All <ChevronRight className={styles.svg} />
183-
</span>
184-
</div>
185-
186-
{modules.map((module, index) => (
171+
{/* Wrap select list in absolute-positioned container to fix macOS Safari scrolling perf */}
172+
<div className={styles.selectListContainer}>
173+
<div className={styles.selectList}>
174+
{hasModules && (
175+
<Fragment>
187176
<div
188177
{...getItemProps({
189-
key: module.ModuleCode,
190-
item: [MODULE_RESULT, module],
178+
item: [SEARCH_RESULT, [MODULE_RESULT, inputValue]],
191179
})}
192-
className={classnames(styles.option, {
193-
[styles.selected]: highlightedIndex === index + 1,
180+
className={classnames(styles.selectHeader, {
181+
[styles.selected]: highlightedIndex === 0,
194182
})}
195183
>
196-
<span>{highlight(`${module.ModuleCode} ${module.ModuleTitle}`, tokens)}</span>
197-
198-
<span className={styles.semesters}>
199-
{module.Semesters.sort().map((semester) => (
200-
<span
201-
className={classnames('badge', BADGE_COLOR[semester])}
202-
title={config.semesterNames[semester]}
203-
>
204-
{config.shortSemesterNames[semester]}
205-
</span>
206-
))}
184+
<span className={styles.headerName}>Modules</span>
185+
<span className="btn-svg">
186+
View All <ChevronRight className={styles.svg} />
207187
</span>
208188
</div>
209-
))}
210-
</Fragment>
211-
)}
212-
{hasVenues && (
213-
<Fragment>
214-
<div
215-
{...getItemProps({
216-
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
217-
})}
218-
className={classnames(styles.selectHeader, {
219-
[styles.selected]: highlightedIndex === venueHeaderIndex,
220-
})}
221-
>
222-
<span className={styles.headerName}>Venues</span>
223-
<span className="btn-svg">
224-
View All <ChevronRight className={styles.svg} />
225-
</span>
226-
</div>
227189

228-
{venues.map((venue, index) => (
190+
{modules.map((module, index) => (
191+
<div
192+
{...getItemProps({
193+
key: module.ModuleCode,
194+
item: [MODULE_RESULT, module],
195+
})}
196+
className={classnames(styles.option, {
197+
[styles.selected]: highlightedIndex === index + 1,
198+
})}
199+
>
200+
<span>{highlight(`${module.ModuleCode} ${module.ModuleTitle}`, tokens)}</span>
201+
202+
<span className={styles.semesters}>
203+
{module.Semesters.sort().map((semester) => (
204+
<span
205+
key={semester}
206+
className={classnames('badge', BADGE_COLOR[semester])}
207+
title={config.semesterNames[semester]}
208+
>
209+
{config.shortSemesterNames[semester]}
210+
</span>
211+
))}
212+
</span>
213+
</div>
214+
))}
215+
</Fragment>
216+
)}
217+
{hasVenues && (
218+
<Fragment>
229219
<div
230220
{...getItemProps({
231-
key: venue,
232-
item: [VENUE_RESULT, venue],
221+
item: [SEARCH_RESULT, [VENUE_RESULT, inputValue]],
233222
})}
234-
className={classnames(styles.option, {
235-
[styles.selected]: highlightedIndex === venueItemOffset + index,
223+
className={classnames(styles.selectHeader, {
224+
[styles.selected]: highlightedIndex === venueHeaderIndex,
236225
})}
237226
>
238-
<span>{highlight(venue, tokens)}</span>
227+
<span className={styles.headerName}>Venues</span>
228+
<span className="btn-svg">
229+
View All <ChevronRight className={styles.svg} />
230+
</span>
239231
</div>
240-
))}
241-
</Fragment>
242-
)}
232+
233+
{venues.map((venue, index) => (
234+
<div
235+
{...getItemProps({
236+
key: venue,
237+
item: [VENUE_RESULT, venue],
238+
})}
239+
className={classnames(styles.option, {
240+
[styles.selected]: highlightedIndex === venueItemOffset + index,
241+
})}
242+
>
243+
<span>{highlight(venue, tokens)}</span>
244+
</div>
245+
))}
246+
</Fragment>
247+
)}
248+
</div>
243249
</div>
244250
</div>
245251
);

‎www/src/js/views/layout/GlobalSearch.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,19 +73,21 @@ $icon-dist-lg: $input-width-open-lg - $input-width;
7373
transform: translate(0);
7474
}
7575

76-
.selectList {
77-
composes: list-unstyled scrollable-y from global;
76+
.selectListContainer {
7877
position: absolute;
7978
top: $navbar-height - 0.5rem;
8079
right: 0;
8180
z-index: $module-select-z-index;
82-
max-height: $dropdown-height;
8381
color: var(--body-color);
8482
border: $input-btn-border-width solid $input-border-color;
8583
border-width: 0 $input-btn-border-width $input-btn-border-width;
8684
border-radius: 0 0 $btn-border-radius $btn-border-radius;
8785
background: var(--body-bg);
86+
}
8887

88+
.selectList {
89+
composes: list-unstyled scrollable-y from global;
90+
max-height: $dropdown-height;
8991
@media (max-height: $dropdown-height + 5rem) {
9092
max-height: calc(90vh - #{$navbar-height});
9193
}

‎www/yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6969,9 +6969,9 @@ react-hot-loader@^3.1.3:
69696969
redbox-react "^1.3.6"
69706970
source-map "^0.6.1"
69716971

6972-
react-modal@^3.1.7:
6973-
version "3.1.7"
6974-
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.7.tgz#21feb937c95cd722bf2d375cada751fdc8189c0e"
6972+
react-modal@^3.1.10:
6973+
version "3.1.10"
6974+
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.10.tgz#8898b5cc4ebba78adbb8dea4c55a69818aa682cc"
69756975
dependencies:
69766976
exenv "^1.2.0"
69776977
prop-types "^15.5.10"

0 commit comments

Comments
 (0)