Autocomplete problems after Bootstrap 5 upgrade

[osma]

At which URL did you encounter the problem?

https://dev.finto.fi/yso/en/

What steps will reproduce the problem?

1. Search for e.g. "cat" in YSO and wait for the autocomplete popup

What is the expected output? What do you see instead?

This is how it works in finto.fi, running Skosmos 2.14:

Here is how it looks with current master branch (dev.finto.fi):

There are at least three problems:

1. The entered string "cat" is shown with the wrong color. Minor CSS issue, probably in the Finto CSS file.
2. Matches on altLabels (e.g. "Catalan people") don't show the prefLabel of the matched concept ("Catalans").
3. The concept type information is missing.

This most likely broke with the Bootstrap 5 upgrade (PR #1182), which included an upgrade of the Typeahead.js widget.
Ping @kinow

What browser did you use? (eg. Firefox, Chrome, Safari, Internet explorer)

Firefox

[kinow]

This most likely broke with the Bootstrap 5 upgrade (PR #1182), which included an upgrade of the Typeahead.js widget.

Hi @osma! That does sound like a regression from #1182 👍 Will take a look next week (holiday this weekend/Monday).

[kinow]

1. The entered string "cat" is shown with the wrong color. Minor CSS issue, probably in the Finto CSS file.

Ah, that's an easy one to fix. @osma should we make the default to be that black/dark-gray from finto.fi, or leave as is?

Here's where we can change it to any other color:

Skosmos/resource/css/styles.css

Line 828 in df06b59

color: var(--medium-color);

[osma]

Ah, that's an easy one to fix. @osma should we make the default to be that black/dark-gray from finto.fi, or leave as is?

Right. Looking closer, it seems that this CSS block was added in PR #1182:

Skosmos/resource/css/styles.css

Lines 826 to 831 in df06b59

	.form-control:focus {
	background-color: var(--gray-100);
	color: var(--medium-color);
	border: none;
	resize: none;
	}

I'm not sure I understand the reason for this block. To me it seems that the only effective change is the text color, which is the problematic one. I tested dropping the whole block and couldn't see any problems with that. So I suggest that the block should be deleted, unless there is a reason for some of those rules.

[osma]

PR #1303 fixed the functional issues (2, 3).

Reopening because of the font color issue (1). Also the font size on the buttons ("English", "Search" in above screenshots) is slightly larger (16px / 1rem) than it used to be (14px), which I hadn't noticed before. I'll soon open a PR fixing these as well.